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>

Answer 1

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

更改您的

#firstp:hover + p + p

到

#firstp:hover ~ p ~ p

~与+选择器的工作方式相同，但~限制性较小，因为它会选择跟随hovered元素的任何p。使用+时，仅选择下一个兄弟（在悬停元素之后）。

Answer 2

我已经注释掉了

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

它似乎有效（即使没有评论）：
的 Fiddle

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

2 个答案: