Question

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

HTML CODE：

<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

您需要在hover

上设置li的样式

.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过渡来显示优雅的显示/消失效果

Answer 2

如果您希望在span悬停时显示li，请将:hover选择器放在li上：

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

http://jsfiddle.net/D3QNr/

演示

如何悬停li的内容

2 个答案: