悬停时让一个div替换另一个

Question

我有两个大小不同的div，D1和D2。当将鼠标悬停在D1上时，我希望D2变得可见，并且当用户离开时D1会回来。因此，当用户悬停时，D2应该替换D1。

如果尝试使用jsFiddle，则会看到问题。块闪烁，D2永远不可见。

.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>

我需要使用JavaScript吗？

Answer 1

如果您可以将后/前元素包装在一个div中，则它比显示/隐藏要简单得多。但是如果后部小于前部，则会得到弹跳效果。

.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>