关键词：
【中文标题】使用 css 将鼠标悬停在第一个子元素上时更改其他子元素【英文标题】：Changing other child elements when hovering over first child using 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>
【问题讨论】：
【参考方案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 代码有效！将鼠标悬停在 li 上时更改图像并使用 CSS 永久保存该图像
】将鼠标悬停在li上时更改图像并使用CSS永久保存该图像【英文标题】：ChangeimagewhenhoveringoverliandkeepthatimagepermanentusingCSS【发布时间】：2016-09-2210:05:42【问题描述】：对于我的生活，我无法弄清楚。本质上，有一个在页面访问时... 查看详情
仅使用 CSS，将鼠标悬停在另一个元素上时显示 div
】仅使用CSS，将鼠标悬停在另一个元素上时显示div【英文标题】：UsingonlyCSS,showdivonhoveroveranotherelement【发布时间】：2011-07-0918:19:36【问题描述】：当有人将鼠标悬停在<a>元素上时，我想显示一个div，但我想在CSS而不是J... 查看详情
将鼠标悬停在按钮上时如何更改 div 的文本？
...06【问题描述】：我有什么：连续8个编号的框。我不允许使用jQuery。我想做的事：当用户将鼠标悬停在编号框上时，div元素内的文本会根据悬停在哪个框上而动态变化。示例：如果用户将鼠标悬停在框1上，则div元素内的文本会... 查看详情
使用 jQuery 将鼠标悬停在相邻文本上时更改图标的颜色
】使用jQuery将鼠标悬停在相邻文本上时更改图标的颜色【英文标题】：ChangeColorofIconWhenHoveringOverAdjacentTextWithjQuery【发布时间】：2021-05-0115:09:40【问题描述】：我见过thisarticle，但我想用JavaScript更改图标的颜色。尝试编写一个函... 查看详情
将鼠标悬停在 img 上时，所有其他图像都使用 CSS 模糊：not(:hover)
】将鼠标悬停在img上时，所有其他图像都使用CSS模糊：not(:hover)【英文标题】：Whenhoveroverimg,allotherimagesblurusingCSS:not(:hover)【发布时间】：2021-02-2116:15:13【问题描述】：我正在尝试研究如何在一个图像被悬停时对所有其他图像应用... 查看详情
将鼠标悬停在 li 上时如何更改所有字体颜色
】将鼠标悬停在li上时如何更改所有字体颜色【英文标题】：Howtochangeallfontcolorwhenhoveringoveranli【发布时间】：2014-01-0708:00:12【问题描述】：我试图做到这一点，当我将鼠标悬停在一个列表元素（它是一个矩形）上时，里面的所有... 查看详情
通过 CSS 将鼠标悬停在父元素上时显示 :after
】通过CSS将鼠标悬停在父元素上时显示:after【英文标题】：Show:afterwhenhoveringovertheparentelementviaCSS【发布时间】：2013-03-0711:57:06【问题描述】：当我将鼠标悬停在父元素本身上时，是否可以display:block;:after伪元素？#myDivposition:relativ... 查看详情
CSS - 将鼠标悬停在 li 元素上时执行转换（下拉菜单）
】CSS-将鼠标悬停在li元素上时执行转换（下拉菜单）【英文标题】：CSS-performtransitionwhenhoveroverlielement(dropdownmenu)【发布时间】：2013-07-3014:57:45【问题描述】：我正在制作这样的主页：http://jsbin.com/umaguc/1/，我目前正在处理下拉菜... 查看详情
将鼠标悬停在容器上时的 CSS 变换图像
...【发布时间】：2011-09-3002:19:44【问题描述】：有没有办法使用CSS制作容器，例如：#p-container.p-categories-item影响该div中的图像？我在图像上有一个CSS动画，但我希望它在我将鼠标悬停在整个元素上时播放，而不仅仅是实际图像本身... 查看详情
悬停一个元素时更改所有其他元素的样式
...不透明度或更改背景），而悬停的那个保持不变。我不能使用+或~选择器，因为我需要它来选择所有兄弟姐妹，而不仅仅是直接相邻的一个 查看详情
将鼠标悬停在按钮上时文本颜色更改
】将鼠标悬停在按钮上时文本颜色更改【英文标题】：Textcolorchangeonhoveroverbutton【发布时间】：2012-08-2119:08:12【问题描述】：我正在尝试更改悬停按钮内文本的颜色。我可以让按钮本身改变颜色，但我希望按钮文本也改变颜色。... 查看详情
如果在表格单元格中，CSS悬停更改其他文本/类的样式不起作用
...，同一页面中的某些其他文本位会改变字体颜色。例如，使用下面的代码，当将鼠标悬停在“Hoveroverme”文本上时，我 查看详情
悬停在一个元素上会导致使用jQuery对其他元素产生悬停效果
】悬停在一个元素上会导致使用jQuery对其他元素产生悬停效果【英文标题】：HoverononeelementcauseshoveringeffectonotherelementwithjQuery【发布时间】：2012-03-1823:11:11【问题描述】：当我将鼠标悬停在元素上时，我必须创建带边框的效果，... 查看详情
将鼠标悬停在单个子 div 上时，将父 div 更改为不同的背景
】将鼠标悬停在单个子div上时，将父div更改为不同的背景【英文标题】：Changeparentdivtoadifferentbackgroundwhenhoveringoverindividualchilddivs【发布时间】：2012-11-1308:43:28【问题描述】：当我只处理一个所需的悬停效果时，我看到了实现此目... 查看详情
将鼠标悬停在列表上时如何更改锚点颜色
】将鼠标悬停在列表上时如何更改锚点颜色【英文标题】：Howtochangeanchorcolorwhenyouhoveroveralist【发布时间】：2011-05-2011:43:39【问题描述】：我有以下HTML和CSS。当我将鼠标悬停在列表上时，我想更改背景颜色和字体颜色。但是，当... 查看详情
将鼠标悬停在 url RichTextBox 上时更改光标
...上时，光标会变为质量非常低的光标，没有抗锯齿。我想使用默认的窗口，它看起来好多了，但我找不到任何解决方案......我只找到了一种更改一般悬停光标的 查看详情
将鼠标悬停在链接 Vanilla JS 上时更改 div 的背景
】将鼠标悬停在链接VanillaJS上时更改div的背景【英文标题】：ChangingbackgroundofadivwhenhoveredoveralinkVanillaJS【发布时间】：2020-08-0702:42:57【问题描述】：当我将鼠标悬停在页面上的链接上时，我希望更改一类名为“grid-light”的div的背... 查看详情
将鼠标悬停在非同级 div 上时更改 SVG 样式
】将鼠标悬停在非同级div上时更改SVG样式【英文标题】：ChangeSVGstylingwhilehoveringovernon-siblingdiv【发布时间】：2014-06-3012:32:13【问题描述】：当鼠标悬停在页面其他位置的另一个分区上时，我希望能够更改内联svg徽标的样式。到目... 查看详情