CSS 模块和悬停 CSS 无法正常工作

Question

我使用自定义构建创建了 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/

我不确定发生了什么。我很想听听您的一些专业建议。

Answer 1

这是按预期工作的，这与 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>