在CSS悬停事件中,我可以更改另一个div的样式吗？

Question

可能重复:
有没有办法将鼠标悬停在一个元素上并影响另一个元素？

当我将鼠标悬停在id为"a"的div或类上时,是否可以获得id为"b"的div或类的背景颜色？

Answer 1

是的,你可以这样做,但前提#b是以后#a的HTML.

如果#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首先是标记,但位于第二个的右侧或下方.它将像以前的兄弟一样工作.

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");
     });
});