如何在CSS中从子项中选择DOM父项

时间:2013-05-05 17:22:32

标签: html css css-selectors

是否可以根据子节点的悬停状态影响父节点?即

nav ul li a:hover {
  /* something here to effect the li or the ul or the nav elements */
}

并不是因为兼容性而烦恼,我希望仅使用最新的firefox / chrome和ie9 / 10基于应用的目标受众。所以CSS3和浏览器特定的CSS很好,但我想尽可能避免使用jQuery(以及一般的javascript)。

2 个答案:

答案 0 :(得分:2)

现在不可能 ,因为你只能在悬停其他元素(从Selectors Level 3开始)时设置下游兄弟或后代的样式

然而,当Selectors Level 4变得稳定并且UA开始实施它时,你最终可以使用父组合 - 例如。

<h2>Hello<span>World</span></h2>

h2! > span:hover {
background: azure; /*the h2 background changes while hovering over the span */
}

答案 1 :(得分:0)

您应该更好地使用javascript onmousehover事件。 像,

<script>
function onhoverstylechange()
{
    document.getElementById("id").style.color='red';
}
</script>
<div id="id">
    <a href="#" onmouseover="onhoverstylechange()">Change</a>
</div>

只需在javascript函数中应用任何css或css文件。