html - 如何在 CSS 中从子节点中选择 DOM 父节点

Question

是否可以根据子节点的 :hover 状态影响父节点？IE。

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

您应该更好地使用 javascriptonmousehover事件。就像是，

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

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