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

【问题标题】：CSS Modules and hover css not working properlyCSS 模块和悬停 CSS 无法正常工作
【发布时间】：2019-05-20 03:03:55
【问题描述】：

我使用自定义构建创建了 react web-app——一切都是从头开始构建的：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 reactjs typescript webpack css-modules

【解决方案1】：

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

当元素为hidden 时，它“失去”悬停状态，因此它切换回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>

【讨论】：

【解决方案2】：

你可以试试这段代码解决问题

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

   &:hover{
     visibility: hidden !important;
   }

【讨论】：

将 &:hover 包裹在 .image 内