Question

所以我在这里定义了两个不同的东西：

<running>Running.</running>

<showr>Cross-Country, Track</showr>

用户应将鼠标悬停在“正在运行”状态，这将显示“showr”。

这是我拥有的CSS;我无法使它发挥作用。

showr { display:none; }

showr running:hover { display:inline; }

您能解释一下我是如何做到这一点的吗？（有些CSS会很好）

感谢您的帮助！

Answer 1

我不确定运行和showr是什么类型的元素，所以我使用了div并编写了可行的代码。假设running和showr是块元素，它应该只是用那些替换div标签。

<div id='running' onMouseOver="document.getElementById('showr').style.display='inline'" onMouseOut="document.getElementById('showr').style.display='none'">Running.</div>

<div id='showr' style='display:none'>Cross-Country, Track</div>

Answer 2

一种解决方案是让<showr>成为<running>的孩子：

<running>Running.<showr>Cross-Country, Track</showr></running>

CSS：

showr { display:none; }

running:hover showr { display:inline; }

但是，这不适用于IE，因为IE没有正确实现CSS。

示例：http://jsfiddle.net/FZCCg/（我将标签名称替换为有效html的类）

Answer 3

应该是：

showr running { display: none}

showr:hover running { display: inline }

Answer 4

它要求您的CSS使用相邻的兄弟选择器（或类似的），例如running:hover + showr { display:inline; } - 或者像其他人所建议的那样，通过更改标记来创建父级兄弟关系。

这是因为实际样式仅应用于与匹配的选择器的SUBJECT。这也是为什么相邻的兄弟形式可以工作以及为什么不需要嵌套，来自5.7 Adjacent Sibling Selector：

相邻的兄弟选择器具有以下语法：E1 + E2，其中E2是选择器的主题。如果E1和E2在文档树中共享相同的父级并且E1紧接在E2之前，则选择器匹配，忽略非元素节点（例如文本节点和注释）。

我不确定哪些浏览器（如果有的话）（肯定不是IE6），将会正确支持相邻的兄弟姐妹。有关CSS选择器规则的信息，请参阅http://www.w3.org/TR/CSS2/selector.html;有关一般兼容性，请参阅quirksmode - CSS。此外，:hover伪类在IE6上完全被打破 - 出乎意料！

另一方面，这对于jQuery和hover事件来说是微不足道的，为JavaScript需求交换了一个有效的CSS2要求; - ）

如何在悬停时更改css类？

4 个答案: