我正在尝试让一个 div 只在你悬停在它的直接父 div 上时出现。目前,当你悬停在该类型的任何 div 上时,该 div 将显示。请参见此 简单示例 的问题。
如何使
如何使
.menu
div 仅在鼠标直接悬停在该 div 上时显示(而不是子 div)?
.widget {
width: 150px;
height: 150px;
background-color: #ddd;
position: relative;
}
.menu {
background-color: #444;
display: flex;
position: absolute;
top: 0;
display: none;
}
.widget:hover > .menu {
display: flex;
}
<div class="widget" style="width: 500px; height: 500px; background-color: #eee;">
<div class="menu">
<p>I should ONLY be visible when you hover the big outer widget and NOT when you are hovering the small inner widget</p>
</div>
<div class="widget" style="left: 200px; top: 200px;">
<div class="menu">
<p>I should ONLY be visible when you hover the small inner widget</p>
</div>
</div>
</div>