Show element B on hover of element A

Question

I'm trying to show element B (share) when hovering element A (project-footer). Any ideas?

body {
  margin: 0px;
}
.main-wrapper {
  max-width: 400px;
  height: 100%;
  margin: 0px auto;
}
.project-wrapper {
  display: flex;
  flex-direction: column;
  height: 320px;
  margin-top: 100px;
}
.project-header {
  display: flex;
  flex-direction: row;
  height: 40px;
  width: 100%
}
.column {
  display: flex;
  flex-direction: column;
  width: 50%;
}
.title {
  width: 100px;
  height: 18px;
  border-radius: 3px;
  background-color: #533C86;
}
.owner {
  width: 85px;
  height: 14px;
  border-radius: 3px;
  background-color: #533C86;
  margin-top: 8px;
}
.more {
  height: 40px;
  width: 40px;
  background-color: #F4F4F4;
  margin-left: auto;
  border-radius: 100px;
}
.project-body {
  width: 400px;
  height: 265px;
  background-color: #47C7C3;
  border-radius: 3px;
  margin-top: 10px;
  display: inherit;
}
.project-footer {
  width: 400px;
  height: 60px;
  background-color: #31A8A4;
  margin-top: auto;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  display: inherit;
  flex-direction: row;
  transition: background-color 0.2s ease-out, padding 0.1s ease-out;
  opacity: 1;
}
.project-footer:hover {
  cursor: pointer;
  background-color: #B5B5B5;
  padding: 30px;
}
.share {
  height: 40px;
  width: 40px;
  background-color: #F4F4F4;
  margin-bottom: 10px;
  margin-top: 10px;
  border-radius: 100px;
  margin-right: 10px;
  margin-left: auto;
  transition: width 0.1s ease-out, opacity 0.1s linear;
}
.share:hover {
  width: 100px;
}

<body>
  <div class="main-wrapper">
    <div class="project-wrapper">
      <div class="project-header">
        <div class="column">
          <div class="title"></div>
          <div class="owner"></div>
        </div>
        <div class="column">
          <div class="more icon"></div>
        </div>
      </div>
      <div class="project-body">
        <div class="badges">
          <div class="badgde"></div>
          <div class="badgde"></div>
        </div>
        <div class="project-footer">
          <div class="column">
            <div class="user"></div>
            <div class="user"></div>
            <div class="user"></div>
          </div>
          <div class="column">
            <div class="share icon"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

http://jsfiddle.net/lombi/xx8n8dux/

Possible duplicate of [How to affect other elements when a div is hovered](http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered) — Rob, Sep 26 '16 at 10:35

svcputl3y7 · Answer 1 · 2016-09-25T13:16:51.417

0

try to add this jQuery, use mouseover and mouseout.

<script>
    $(document).ready(function(e){
        $(".project-footer").mouseover(function(){
            $(".share").width(100);
        });
        $(".project-footer").mouseout(function(){
            $(".share").width(40);
        }); 
    });
</script>

edited Sep 25 '16 at 13:16

answered Sep 25 '16 at 13:02

svcputl3y7

33
1
7

score -1 · Answer 2 · answered Sep 25 '16 at 12:16

-1

use the display property

.share{
   display:none;
}    

.project-footer:hover .share{
   display:block;   
}

answered Sep 25 '16 at 12:16

Alessandro Messori

1,035
1
14
23

Show element B on hover of element A

2 Answers2