在CSS悬停事件中，我可以更改另一个div'；什么样的款式？

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

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

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

---

是的，您可以这样做，但前提是HTML中

#b

在

#a

之后

如果

#b

紧跟在

#a

之后：

这是在使用（

~

）

+

和

~

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

如果

#b

是

#a

的后代，您只需使用

#a:hover#b

---

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

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

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

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

---

没有jQuery的纯解决方案：

Javascript（头） HTML（正文）

这是一个元素
这是元素b

---

jsiddle:

not（or）。jquery是这里最合适的解决方案。然后至少解释一下为什么css不合适，以及其他更合适的选项是什么。我不认为仅仅在这个问题上抛出jQuery解决方案是特别有用的。jQuery是javascript的扩展。用户从未明确要求没有jQuery解决方案。他也没有明确要求“否-”解决方案，但考虑到问题只标记了“”，似乎可以公平地假设他想要css解决方案。应该注意的是，同级选择器（+）在ie8及以下版本中无法正常工作。很有趣，谢谢@thirtydot。两个操作符中的任何一个都处理直接嵌套的元素吗？（例如

…

）@IanCampbell:Like

#asdf:hover>#affect#u这个元素

？很酷，子选择器

可以工作，谢谢@thirtydot@三十点--我想知道，当

#a

和

#b

都在一个单独的包装器div中时，悬停效果不起作用。有没有基于CSS的解决方案能够以某种方式实现这一点？（例如：A**

diva

和**B

divb

）我在这里设置了一个JSFIDLE：是的，它可以，尽管只是在相对有限的情况下。但是CSS当然可以做到这一点。@David yes仅在有限的情况下，当#b是#a的子代或兄弟姐妹时，等等。OP没有指定两者之间的关系，所以我假设不是这样。使用flexbox，您可以悬停其他元素，即使它们（看起来）在DOM中被悬停的元素之前。看我的。因为包括了你甚至不需要的鼠标重置而被撞倒。看我的。@DanDascalescu这就是我要找的，谢谢！如何在SCS上使用它？使用flexbox，您可以悬停其他元素，即使它们（看起来）放置在DOM中悬停的元素之前。看我的。

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

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

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

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