Question

下面隐藏了元素，但是当我将鼠标悬停在它上面时我无法恢复。我已经检查了 devtools 以查看它确实呈现在屏幕上，我只是看不到 div 的内容。

如何使 div 仅在悬停时可见？

.visible-on-hover {
  visibility: hidden;
}

.visible-on-hover:hover {
  visibility: visible !important;
}

Answer 1

带有 visibility: hidden; 的元素不会接收任何鼠标事件，因此 :hover 永远不会在此类元素上触发。

您可以使用 visibility 代替 opacity：

div {
  background-color: orange;
  height: 200px;
  width: 400px;
  padding: 50px;
}

.visible-on-hover {
  opacity: 0;
  transition: opacity .3s ease;
}

.visible-on-hover:hover {
  opacity: 1;
}

<div class="visible-on-hover">visible only on hover</div>

Answer 2

您不能悬停、聚焦或选择隐藏的元素。您可以使用 opacity

.visible-on-hover {
  opacity: 0;
}

.visible-on-hover:hover {
  opacity: 1;
}

CSS：仅当您将鼠标悬停在元素上时才显示该元素

2 个答案: