Question

我用自定义版本创建了react web-app-一切都是从头开始构建的：webpack，webpack-server，打字稿，图像加载器，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的工作方式。

当元素为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>

Answer 2

您可以尝试使用此代码来解决问题

---
- name: Import task1
  import_tasks: task1.yml

- name: Import task2
  import_tasks: task2.yml

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

2 个答案: