我试图在 div 的第一个 child 上使用悬停来影响第三个 child 。有谁知道仅使用 css 就可以做到这一点的方法吗？
http://jsfiddle.net/boou28/fNxGa/
CSS
/* works */
#firstp + p
{
background:#dddddd;
}
#firstp:hover + p
{
background:#ff0000;
}
#firstp + p + p
{
background:#dddddd;
}
/* doesnt work */
#firstp:hover + p + p
{
background:#ff0000;
}
HTML
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
</body>
最佳答案
改变你的
#firstp:hover + p + p
到
#firstp:hover ~ p ~ p
~ 与 + 选择器的工作方式相同，但 ~ 的限制较少，因为它选择任何 p在悬停元素之后。使用 + 仅选择下一个兄弟(悬停元素之后)。
关于css - 使用 css 将鼠标悬停在第一个子元素上时更改其他子元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14973780/