在一个CSS悬停事件，我可以改变另一个div's样式吗?

当我悬停在一个div或类的id为“a”，我可以得到一个div或类的背景颜色与id为“b”改变?

727029 次浏览
小开

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

$(document).ready(function(){
$("#a").mouseover(function(){
$("#b").css("background-color", "red");
});
});
小开
最佳答案

是的，你可以这样做，但前提是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之间有其他元素，你可以使用: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的右边或下面。它会像以前的兄弟姐妹一样工作。

小开

这不能完全用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/


提交答案