我使用自定义构建创建了 React 网络应用程序——一切都是从头开始构建的:webpack、webpack-server、typescript、image-loaders、css、scss、css-modules。 我对 CSS 伪元素有疑问。悬停无法正常工作。
.image {
height: auto;
width: auto;
z-index: 10;
}
.image:hover{
visibility: hidden !important;
}
实时预览链接 https://5c1a4a2b9db5a37380b6ebf0--practical-archimedes-b4d9da.netlify.com/
我不确定发生了什么。我很想听听您的一些专业建议。
最佳答案
这是按预期工作的,这与 css-modules
或 react
无关,这就是 CSS
的工作方式。
当元素隐藏
时,它“失去”悬停状态,因此它切换回可见
(可见性
的初始值)然后再次捕获悬停事件等。这就是它闪烁的原因。
你可以做的是让它达到 opacity:0
:
.image:hover{
opacity:0;
}
差异示例:
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.box {
background-color: #333;
color: #fff;
flex: 1;
margin: 15px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.opacity:hover {
opacity: 0;
}
.hidden:hover {
visibility: hidden;
}
<div class="wrapper">
<div class=" box opacity ">Opacity</div>
<div class="box hidden ">Visibility</div>
</div>
关于CSS 模块和悬停 CSS 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53854319/