Have one div replace another on hover

Question

I have 2 divs that are different sizes, D1 and D2. when hovering over D1 I want D2 to become visible, and D1 to come back when the user moves off. So D2 should replace D1 when the user hovers.

If you try the jsFiddle, you'll see the problem. The blocks flash and D2 never becomes visible.

.wrapper {
    position: relative;
}
    
#inBack {
    position: absolute;
    top: 0;
    right: 0;
}
    
#inFront :hover {
    display:none;
}
    
#inBack :hover {
    display:block;
}

<div class="wrapper" >
    <div id="inFront"  style="background-color:red;" class="navi">
        <h2>
          header of item in front
        </h2>
        <text>
          <p>body of item in front</p>
          <p>body of item in front</p>
        </text>
    </div>
      
    <div id="inBack"  style="background-color:green; display:none;" >
        <h2>
          header of item in back
        </h2>
        <text>
          <p>body of item in back</p>
          <p>body of item in back</p>
          <p>body of item in back</p>
          <p>body of item in back</p>
          <p>body of item in back</p>
          <p>body of item in back</p>
        </text>
    </div>
</div>
    
<div style="background-color:cyan;">
    <p>
    This part should be pushed down to make way for the larger text
    </p>
   
</div>

Do I need javascript for this?

Your D1 shrinks on hover, so it's not being hovered on anymore so it grows again until you're hovering again. That's why you get that effect. Try wrapping it in a div and use hover on that to control the children. — Jonathan Rys, Oct 26 '18 at 18:14

score 2 · Accepted Answer · answered Oct 26 '18 at 18:27

If you can wrap the back/front elements in one more div than it is a lot simpler to show/hide. but if back is smaller than front, you will get the bouncing effect.

.wrapper2:hover #inFront {
  display: none;
}

.wrapper2:hover #inBack {
  display: block;
}

#inFront {
  background-color: red;
}

#inBack {
  background-color: yellow;
  display: none;
}

<div class="wrapper">
  <div class="wrapper2">
    <div id="inFront" style="background-color:red;" class="navi">
      <h2>
        header of item in front
      </h2>
      <text>
      <p>body of item in front</p>
      <p>body of item in front</p>
    </text>
    </div>

    <div id="inBack">
      <h2>
        header of item in back
      </h2>
      <text>
      <p>body of item in back</p>
      <p>body of item in back</p>
      <p>body of item in back</p>
      <p>body of item in back</p>
      <p>body of item in back</p>
      <p>body of item in back</p>
    </text>
    </div>
  </div>
</div>

<div style="background-color:cyan;">
  <p>
    This part should be pushed down to make way for the larger text
  </p>

</div>

Have one div replace another on hover

1 Answers1