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

Question

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

Answer 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 在标记中是第一个，但位于第二个的右侧或下方。它将像以前的兄弟姐妹一样工作。

Answer 2

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

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

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

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

Answer 4

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

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