在CSS的hover事件中，我能改变另一个div的样式吗？

Question

当我将鼠标悬停在具有ID为"a"的div或class上时，能否使具有ID为"b"的div或class的背景颜色发生变化？

- Wesley Skeen

---

使用flexbox，即使其他元素（看起来）在DOM中位于悬停元素之前，也可以将鼠标悬停在它们上面。请参阅我的[pure-CSS rating widget]（https://dev59.com/kW855IYBdhLWcg3wKw5Y#32470900）。 - Dan Dascalescu

Answer 1

是的，你可以这样做，但前提是在HTML中#b必须在#a之后。

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

#a:hover + #b {
    background: #ccc
}

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

这是使用相邻兄弟选择器（+）。

如果在#a和#b之间有其他元素，您可以使用这个方法：

#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>

这是使用通用兄弟组合器 (~)。

+ 和 ~ 在所有现代浏览器和IE7+中都可以使用。

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

替代方案：您可以使用纯CSS来实现此目的，通过将第二个元素定位到第一个元素之前。第一个

在标记中首先出现，但被定位到右侧或下方的第二个

之后。它将像前一个兄弟元素一样工作。

- thirtydot

---

需要注意的是，在IE8及以下版本中，兄弟选择器（+）无法正常工作。 - Ben Rowe

有趣，谢谢@thirtydot。这两个操作符是否可以作用于一个立即嵌套的元素？（例如 <div id = "asdf"><div id = "affect_this_element?">...</div></div>） - Ian Campbell

像这样 #asdf:hover > #affect_this_element？ - thirtydot

好的，子元素选择器>有效了，谢谢@thirtydot！ - Ian Campbell

@thirtydot -- 我想知道，当#a和#b都在单独的包装div里面时，鼠标悬停效果不起作用。有没有基于CSS的解决方案可以让它们能够正常工作？（例如：A <div class="wrapper01"><div id="a">Div A</div></div> 和 B <div class="wrapper02"><div id="b">Div B</div></div>）我在这里设置了一个jsfiddle链接: http://jsfiddle.net/kenhimself/mu86yj6f/ - kenhimself

Answer 2

这无法仅通过 CSS 实现。这是一种行为，它影响页面的样式。

使用 jQuery，您可以快速实现来自问题的行为：

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

- Ben Rowe

---

可以，在相对有限的情况下可以通过CSS实现。 - David Thomas

@David 是的，只有在 #b 是 #A 的子代或兄弟等特定关系时才适用。由于提问者没有具体说明两者之间的关系，因此我认为这种情况并不成立。 - Ben Rowe

使用flexbox，即使其他元素（看起来）在DOM中位于悬停元素之前，您也可以悬停它们。请参见我的pure-CSS评级小部件。 - Dan Dascalescu

因为包含mouseout重置而被撤回。 - moodboom

Answer 3

一种不使用jQuery的纯解决方案：

Javascript（头部）

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

HTML (Body)

<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/

- kongr45gpen

---

你甚至不需要使用onmouseover。请查看我的纯CSS评分小部件。 - Dan Dascalescu

@DanDascalescu 这就是我正在寻找的，谢谢！ - boydenhartog

如何在SCSS中使用它？ - Adam

这是我找到的唯一有效的解决方案。我甚至可以稍微调整一下函数，以使目标元素也成为参数。非常感谢 @kongr45gpen！ - Catlover

Answer 4

下面的示例基于jQuery，但可以使用任何JS工具包或甚至纯JS实现

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

- Curtis

---

请使用CSS标签，但不要使用jQuery（或JavaScript）标签。 - David Thomas

jQuery是这里最合适的解决方案。 - Madara's Ghost

至少提供一个解释，说明为什么 CSS 不足以满足需求，并介绍其他更适合的选项。我认为只是把一个 jQuery 解决方案放进问题中并不特别有用。 - David Thomas

他也没有明确要求一个“无-[tag:python]”的解决方案，但考虑到问题仅标记为“[tag:css]”，可以合理地假设他想要一个CSS解决方案。 - David Thomas

谢谢你也提供了jQuery的解决方案。这对我很有帮助。 - Himanshu