使用CSS在悬停在第一个子元素上时更改其他子元素

Question

使用CSS在悬停在第一个子元素上时更改其他子元素

3

我试图通过悬停在 div 的第一个子元素上来影响第三个子元素。有人知道如何仅使用 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>

- Andrew

2个回答

1

我已经注释掉了

。

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

看起来它正在工作（即使没有注释）：
Fiddle

- Barnee

很奇怪，我刚刚在火狐浏览器中打开了你的fiddle，它运行得很好，但是在谷歌浏览器中却不起作用。谢谢你的答复！ - Andrew

这是真的...我只在Firefox中测试过...但是Jose的代码有效！ - Barnee

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jose Rui Santos · Accepted Answer

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

更改您的代码：

#firstp:hover + p + p

to

#firstp:hover ~ p ~ p

~ 与 + 选择器的作用相同，但是 ~ 不那么严格，因为它选择任何跟在悬停元素后面的 p。而使用 + 只能选择下一个同级元素。