我不相信这对于纯 CSS 是可能的,但我想确认一下。
我有两个元素。一个在另一个之上。当用户将鼠标悬停在顶部元素上时,我想隐藏它并允许指针事件传递到底部元素。当用户停止悬停时,我想重新显示该元素。
我在下面生成了一个示例,但它闪烁。这显然是因为 :hover 效果会在每次鼠标因指针事件而移动时打开/关闭:无。
没有 JavaScript 可以实现吗?
html,
body {
margin: 0;
}
.container {
height: 500px;
width: 500px;
background-color: red;
}
.container:hover {
background-color: blue;
}
.box {
height: 200px;
width: 200px;
background-color: green;
position: absolute;
left: 0;
top: 0;
}
.box:hover {
opacity: 0;
}
<div class='container'>
</div>
<div class='box'>
</div>
最佳答案
我想你想要显示:无或可见性:隐藏,除非我把事情过于简单化了。
关于html - 使用纯 CSS 隐藏悬停元素直到鼠标移出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31151916/