Question

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

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）。

Answer 1

现在不可能，因为你只能在悬停其他元素（从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 */
}

Answer 2

您应该更好地使用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文件。

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

2 个答案: