css - 使用 css 将鼠标悬停在第一个子元素上时更改其他子元素

Question

我试图在 div 的第一个孩子上使用悬停来影响第三个孩子。有谁知道只使用CSS来做到这一点的方法？

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>

score 3 · Accepted Answer

http://jsfiddle.net/fNxGa/5/

改变你的

#firstp:hover + p + p

到

#firstp:hover ~ p ~ p

~与选择器相同+，但~限制较少，因为它选择p悬停元素之后的任何元素。+仅选择下一个兄弟（在悬停元素之后）。

score 1 · Accepted Answer

我已经注释掉了

#firstp:hover + p
{
   background:#ff0000;
}

它似乎正在工作（即使没有评论）：
小提琴

css - 使用 css 将鼠标悬停在第一个子元素上时更改其他子元素

2 回答 2

Related

Reference