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

【问题标题】：Changing other child elements when hovering over first child using css使用 css 将鼠标悬停在第一个子元素上时更改其他子元素
【发布时间】：2013-02-05 02:18:06
【问题描述】：

我试图在 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>

【问题讨论】：

标签： css hover css-selectors parent-child

【解决方案1】：

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

改变你的

#firstp:hover + p + p

到

#firstp:hover ~ p ~ p

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

【讨论】：

感谢您的精彩回答！
实际上，这行得通的唯一原因是 Chrome 存在 :hover 和 + 的错误。在正常情况下，您不必将+ 更改为~ 即可使其工作，因为#firstp:hover + p + p 仍将选择第三个p（并且仅选择第三个p）。

【解决方案2】：

我已经注释掉了

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

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

【讨论】：

这很奇怪，我刚刚在火狐中打开了你的小提琴，它工作正常，但对我来说它在 chrome 中不起作用。谢谢你的回答！
那是真的...我只在 Firefox 中测试过...但是Jose's 代码有效！