<分区>
标签 javascript html css
<分区>
我有 2 个不同大小的 div，D1 和 D2。当悬停在 D1 上时，我希望 D2 变得可见，并且当用户离开时 D1 回来。因此，当用户悬停时，D2 应该替换 D1。
如果您尝试 jsFiddle ，你会看到问题。 block 闪烁，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 吗？
最佳答案
如果你可以将后/前元素包裹在一个 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>关于javascript - 让一个 div 在悬停时替换另一个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53014157/