span：悬停元素不适合我的盒子

Question

我的目标是构建一个包含两个标签的框，当用户将鼠标悬停在标签上时，标签中会显示某些文字。对于我的盒子上的标签，我在div中创建了一个列表。

在“a”标签内，我放入了一个标签，用于隐藏未隐藏的文本。在我的CSS中，我设置了span {opacity：0}和span：hover {opacity：1}。文本是隐藏的，但当我悬停在一个没有任何反应的时候。

查看小提琴：

http://jsfiddle.net/lamike/74sBm/6/

有什么建议吗？

感谢您的反馈

Answer 1

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

a:hover span {
    opacity: 1;
}

这适用于FF。

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

Answer 2

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

a:hover span {

    opacity: 1;

}