仅在悬停时显示文本

Question

我有悬停问题，我希望文本和跨度仅在悬停时显示，但在我的情况下，文本和跨度一直显示，我认为字体很难阅读任何修复它的建议？提前致谢。

<li class="one"><img class="img" src="https://i.imgur.com/MZy3vOp.jpg" alt="" />
<h2>some text</h2>
      <span class="h1"></span>
      <span class="h2"></span>
      <span class="h3"></span>
</li>

Answer 1

你试过这个吗：

span,
h2 {
  opacity: 0;
}

span:hover,
h2:hover {
  opacity: 1;
}

Answer 2

如果我理解你的问题是正确的，那么你可以尝试添加到 .grid li class 这个：

overflow: hidden;

此外，如果您希望您的文本显示得更加缓和，那么只需添加到 .grid li h2 class 这一行：

opacity: 0;

对此class .grid li:hover h2:

opacity: 1;

仅在悬停时显示文本

show text only on hover

html

css

hover