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

Question

我使用自定义构建创建了 React 网络应用程序——一切都是从头开始构建的：webpack、webpack-server、typescript、image-loaders、css、scss、css -模块。我对 CSS 伪元素有疑问。悬停无法正常工作。

 .image {
  height: auto;
  width: auto;
  z-index: 10;
}

.image:hover{
  visibility: hidden !important;
}

link 实时预览 https://5c1a4a2b9db5a37380b6ebf0--practical-archimedes-b4d9da.netlify.com/

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

Answer 1

您可以试试这个代码来解决问题

.image {
  height: auto;
  width: auto;
  z-index: 10;
}

   &:hover{
     visibility: hidden !important;
   }

Answer 2

这是按预期工作的，这与 css-modules 或 react 无关，这就是 CSS 的工作方式。

当元素处于 hidden 时，它 "loses" 悬停状态，因此它切换回 visible（visibility 的初始值）然后再次捕获悬停事件等等。这就是它闪烁的原因。

你能做的就是到达 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 无法正常工作

CSS Modules and hover css not working properly

css

reactjs

typescript

webpack

css-modules