html - 仅在悬停时显示文本

Question

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

https://jsfiddle.net/5xqs7cp1/1/

<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

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

overflow: hidden;

---

此外，如果您希望您的文本以一些缓动方式显示，则只需将这一行添加到 .grid li h2 类中:

opacity: 0;

对于这个类.grid li:hover h2:

opacity: 1;