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

用jquery，你可以快速实现行为从你的问题:

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

一个没有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/

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

用jquery，你可以快速实现行为从你的问题:

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

是的，你可以这样做，但只有当#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>

这是使用相邻的兄弟组合子(+)

如果在#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>

这是使用一般的兄弟组合子(~)。

+和~在所有现代浏览器和IE7+中都可以运行

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

替代方案:您可以使用纯CSS通过将第二个元素定位在第一个元素之前来做到这一点。第一个div在标记中位于第一个，但位于第二个div的右边或下面。它会像以前的兄弟姐妹一样工作。

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

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