html - 如何悬停 li 中的内容

Question

我有一个简单的 html 代码，其中包含一些数据，但 li 有图像背景，悬停时我想显示来自 span 的数据。

HTML 代码:

<ul class="container">
<li class="icons_27"><span class="data_27">DATA 27 - TORONTO</span></li>
<li class="icons_28"><span class="data_28">DATA 28 - NEW YORK</span></li>
</ul>

CSS:

.container li span {
    display: none;
}
.container li span:hover {
    display: block;
}

我的问题是如何在悬停时显示跨度数据？

Answer 1

您需要为 li 上的 hover 设置样式

.container li:hover span {
    display: block;
}

但这只有在你的 li 可见时才有效，即使内部跨度有 display: none(否则你的 li 没有可以悬停的可见区域)。

您可以通过为您的列表项定义例如 width 或 height 来解决这个潜在问题。
或者——不是将 display: none 赋给内部 span——你可以使用不同的样式，例如

.container li span {
    visibility: hidden; /* or also opacity : 0; */
}

.container li:hover span {
    visibility: visible;  /* or also opacity : 1; */
}

---

注意:不透明度方法(而不是显示或可见性)还可以让您有机会使用 CSS3 过渡制作优雅的出现/消失效果