span:hover 元素不适用于我的盒子答案

【问题标题】：span:hover elements not working for my boxspan:hover 元素不适用于我的盒子
【发布时间】：2012-02-13 18:10:49
【问题描述】：

我的目标是构建一个带有两个选项卡的框，并在用户将鼠标悬停在选项卡上时显示选项卡中的某些文本。对于我盒子上的选项卡，我在 div 中创建了一个列表。

在“a”标签中，我为不悬停时想要隐藏的文本添加了一个标签。在我的 CSS 中，我设置了 span{opacity: 0} 和 span:hover{opacity:1}。文本是隐藏的，但是当我将鼠标悬停在 a 上时，什么也没有发生。

看看小提琴：

有什么建议吗？

感谢您的反馈

【问题讨论】：

您必须为此使用 JavaScript。
你要javascript吗？如果你是你可能想考虑使用一个框架来帮助你...... jquery ui 等。
你展示了正确的小提琴吗？我没有看到任何opacty，更不用说<span> 标签了..
我更新了小提琴......我的目标是只用 CSS 和 HTML 来做到这一点，这可能吗？还是 span:hover 是您在 Javascript 中所做的事情？
在某些浏览器中仅使用 HTML/CSS 是可能的。我不确定 IE 的所有版本，但 FF/Chrome 应该可以很好地配合我下面的答案。运行 Linux 所以在 IE 中进行测试是一件很痛苦的事情。 ;)

【解决方案1】：

首先，您的小提琴是错误的 - 您在 span 和 span:hover 中都有 opacity: 1。更改它并且它工作正常 - X 出现，但只有当您将鼠标悬停在包含 X 的 span 上时。我猜您希望它在标签悬停时显示，所以试试这个：

a:hover span {
    opacity: 1;
}

这在 FF 中对我有用。

编辑：哦，你真的应该在跨度上使用一个类，而不是将样式应用于所有跨度。

【讨论】：

【解决方案2】：

如果您希望在悬停选项卡时更改 span 元素，那么您需要的是：

a:hover span {

    opacity: 1;

}

【讨论】：