让一个 div 在悬停时替换另一个 [重复]答案

【问题标题】：Have one div replace another on hover [duplicate]让一个 div 在悬停时替换另一个 [重复]
【发布时间】：2018-10-27 03:24:05
【问题描述】：

我有 2 个不同大小的 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吗？

【问题讨论】：

您的 D1 在悬停时会缩小，因此不再悬停，所以它会再次增长，直到您再次悬停。这就是为什么你会得到这种效果。尝试将其包装在一个 div 中并在其上使用悬停来控制子级。

标签： javascript html css

【解决方案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>

【讨论】：