Question

可能重复：
Is there any way to hover over one element and effect a different element?

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

Answer 1

是的，您可以这样做，但仅当#b位于HTML中的#a之后。

如果在#b：http://jsfiddle.net/u7tYE/

之后立即#a

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

ALTERNATIVE：您可以使用纯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，但可以使用任何JS工具包甚至普通的JS来实现

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

Answer 4

没有jQuery的纯解决方案：

Javascript（Head）

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悬停事件中，我可以更改另一个div的样式吗？

4 个答案:

Javascript（Head）

HTML（正文）