影响 div:hover 与另一个 div [重复]

Posted 2023-03-06

【中文标题】影响 div:hover 与另一个 div [重复]

【英文标题】：Affecting div:hover with another div [duplicate]

【发布时间】：2011-10-27 12:51:43

【问题描述】：

我正在制作一个画廊，当您将鼠标悬停在主图像上时，缩略图应该变得透明。我想用纯 CSS 来实现这一点，但我不确定这是否可能。

CSS：

/* should affect thumbs but not main */
/* obviously this code wouldn't work */
#main:hover, #thumbs 
  opacity: .5;

html：

<div id="main">
  Hover over me to change #thumbs
</div>
<div id="thumbs">
  I change when you hover over #main
</div>

这可能使用纯 CSS 吗？

【参考方案1】：

即使是这样，它在 IE 中也不起作用:)

我建议使用 onmouseover 事件

不过这是个好问题，我很好奇是否有人有通过 css 跨浏览器的解决方案

【讨论】：

它不需要在 IE 中工作，我已经知道如何编写回退，但我不认为我会为此烦恼。它更像是一个个人网站。

@rev：请参阅 Nightfirecat 提供的解决方案。太棒了，它适用于 IE 7 和 8 - 我已经测试过

您可以单独使用 CSS 完成此操作。请参阅我的pure-CSS signal bar rating widget answer，它表明您可以更改甚至（似乎）显示在 DOM 中的元素的样式在悬停的元素之前。

【参考方案2】：

只有选择器的子级会受到影响。否则，您将需要使用 javascript。

例如：

div:hover #childDiv 
  background: green;

【参考方案3】：

我认为你需要一些 javascript。

【讨论】：

您可以单独使用 CSS 完成此操作。请参阅我的pure-CSS signal bar rating widget answer，它表明您可以更改甚至（似乎）显示在 DOM 中的元素的样式在悬停的元素之前。

认真的吗？ 4 年后投反对票？

现在和以前一样错。我昨天刚刚偶然发现了答案。我不是一个可能会在发布答案时阅读答案的版主；只是一个通过网络搜索来到这里的随机用户。

4 年前有一个明确接受的答案，但您决定继续讨伐其他答案？你真的需要一个更好的爱好。

【参考方案4】：

没有。您必须使用 Javascript。

【讨论】：

您可以单独使用 CSS 完成此操作。请参阅我的pure-CSS signal bar rating widget answer，它表明您可以更改甚至（似乎）出现在 DOM 中的元素的样式在悬停的元素之前。

【参考方案5】：

当然，只需使用相邻兄弟选择器：

#div1:hover + #div2 
    ...

这里有一个例子：http://jsfiddle.net/6BfR6/94/

【讨论】：

+1 太棒了...甚至不知道这存在！ meyerweb.com/eric/articles/webrev/200007a.html

哇！谢谢！这绝对是完美的！就像我上面的那个人一样，我不知道它的存在。完美。

+1 我不知道你可以在没有 Javascript 的情况下做到这一点。

@Nightfirecat，是的，我知道这是一个 2.1 选择器。我只是想展示 current 选择器的完整规范 :-)

您可以使用更通用的~ 选择器，您甚至可以定位显示为在 DOM 中悬停的元素的元素。见我的pure-CSS signal bar rating widget answer。

【参考方案6】：

#div1:hover + #div2 ...

它在 IE 7、8、9 和 10 中运行良好。不需要任何 JS 或 onovermouse 并且 NOT ONLY 选择器的子级会受到影响。

试试“夜火猫”的示例链接。