在 CSS 悬停事件中，我可以更改另一个 div 的样式吗？ [复制]

Posted 2023-03-06

【中文标题】在 CSS 悬停事件中，我可以更改另一个 div 的样式吗？ [复制]

【英文标题】：On a CSS hover event, can I change another div's styling? [duplicate]

【发布时间】：2011-10-18 02:40:58

【问题描述】：

当我将鼠标悬停在 id 为“a”的 div 或类上时，是否可以更改 id 为“b”的 div 或类的背景颜色？

【问题讨论】：

使用 flexbox，您可以悬停其他元素，即使它们（似乎）被放置在 DOM 中悬停的元素之前。见我的pure-CSS rating widget。

【参考方案1】：

是的，您可以这样做，但前提是 #b 在 html 中位于 #a 之后。

如果#b 紧跟在#a 之后：http://jsfiddle.net/u7tYE/

#a:hover + #b 
    background: #ccc


<div id="a">Div A</div>
<div id="b">Div B</div>

这是使用adjacent sibling combinator (+)。

如果#a和#b之间还有其他元素，可以这样使用：http://jsfiddle.net/u7tYE/1/

#a:hover ~ #b 
    background: #ccc


<div id="a">Div A</div>
<div>random other elements</div>
<div>random other elements</div>
<div>random other elements</div>
<div id="b">Div B</div>

这是使用general sibling combinator (~)。

+ 和 ~ 都适用于所有现代浏览器和 IE7+

如果#b 是#a 的后代，您可以简单地使用#a:hover #b。

替代方案：您可以使用纯 CSS 将第二个元素放在第一个之前。第一个 div 在标记中是第一个，但位于第二个的右侧或下方。它将像以前的兄弟姐妹一样工作。

【讨论】：

需要注意的是兄弟选择器（+）在ie8及以下版本不能正常工作。

有趣，谢谢@thirtydot。任一运算符是否适用于立即嵌套的元素？ （如<div id = "asdf"><div id = "affect_this_element?">...</div></div>）

@IanCampbell：喜欢#asdf:hover > #affect_this_element?

酷，子选择器> 有效，谢谢@thirtydot！

@thirtydot -- 我想知道，当 #a 和 #b 都在单独的包装 div 中时，悬停效果不起作用。任何基于 CSS 的解决方案可以以某种方式使其工作吗？ （一个例子可能是这样的：A**<div class="wrapper01"><div id="a">Div A</div></div> and **B <div class="wrapper02"><div id="b">Div B</div></div>）我在这里设置了一个jsfiddle：jsfiddle.net/kenhimself/mu86yj6f

【参考方案2】：

这不能纯粹用 css 来完成。这是一种影响页面样式的行为。

使用 jquery，您可以快速实现问题中的行为：

$(function() 
  $('#a').hover(function() 
    $('#b').css('background-color', 'yellow');
  , function() 
    // on mouseout, reset the background colour
    $('#b').css('background-color', '');
  );
);

【讨论】：

是的，它可以，尽管只是在相对有限的情况下。但这当然可以用 CSS 来完成。

@David 是的，仅在#b 是#A 的孩子或兄弟姐妹的有限情况下，等等。OP 没有指定两者之间的关系，所以我认为情况并非如此.

使用 flexbox，您可以悬停其他元素，即使它们（似乎）被放置在 DOM 中悬停的元素之前。见我的pure-CSS rating widget。

因包含鼠标悬停重置而受到冲击

【参考方案3】：

没有 jQuery 的纯解决方案：

javascript（头部）

function chbg(color) 
    document.getElementById('b').style.backgroundColor = color;
   

HTML（正文）

<div id="a" onmouseover="chbg('red')" onmouseout="chbg('white')">This is element a</div>
<div id="b">This is element b</div>

JSFiddle：http://jsfiddle.net/YShs2/

【讨论】：

你甚至不需要鼠标悬停。见我的pure-CSS rating widget。

@DanDascalescu 这就是我要找的，谢谢！

如何在 SCSS 上使用它？

这是唯一适合我的解决方案。我什至可以稍微调整函数以允许目标元素也成为参数。非常感谢@kongr45gpen！

【参考方案4】：

以下示例基于 jQuery，但可以使用任何 JS 工具包甚至是普通的旧 JS 来实现

$(document).ready(function()
     $("#a").mouseover(function()
         $("#b").css("background-color", "red");
     );
);

【讨论】：

css not jquery（或javascript）。

jquery 是这里最合适的解决方案。

然后至少解释一下为什么 css 不够用，以及其他更合适的选项是什么。我不认为仅仅在问题中抛出一个 jQuery 解决方案特别有用。

jQuery 是 javascript 的扩展。用户从未明确要求没有 jQuery 解决方案。

他也没有特别要求提供“no-python”的解决方案，但鉴于该问题仅标记为“css”，看来公平地假设他想要一个 CSS 解决方案。