在 CSS 悬停事件中，我可以更改另一个 div 的样式吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6910049/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
On a CSS hover event, can I change another div's styling?
提问by Wesley Skeen
When I hover over a div or class with an id of "a", can I get the background color of a div or class with the id of "b" to change?
当我将鼠标悬停在 id 为“a”的 div 或类上时，是否可以更改 id 为“b”的 div 或类的背景颜色？
回答by thirtydot
Yes, you can do that, but only if #bis after #ain the HTML.
是的，您可以这样做，但前提#b是#a在 HTML 之后。
If #bcomes immediately after #a: http://jsfiddle.net/u7tYE/
如果#b紧随其后#a：http: //jsfiddle.net/u7tYE/
#a:hover + #b {
background: #ccc
}
<div id="a">Div A</div>
<div id="b">Div B</div>
That's using the adjacent sibling combinator(+).
那是使用相邻的兄弟组合子( +)。
If there are other elements between #aand #b, you can use this: http://jsfiddle.net/u7tYE/1/
如果#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>
That's using the general sibling combinator(~).
那是使用一般的兄弟组合子( ~)。
Both +and ~work in all modern browsers and IE7+
双方+并~在所有现代浏览器和IE7 +工作
If #bis a descendant of #a, you can simply use #a:hover #b.
如果#b是 的后代#a，则可以简单地使用#a:hover #b.
ALTERNATIVE: You can use pure CSS to do this by positioning the second element before the first. The first div is first in markup, but positioned to the right or below the second. It will work as if it were a previous sibling.
替代方法：您可以使用纯 CSS 来完成此操作，方法是将第二个元素放在第一个元素之前。第一个 div 在标记中位于第一个，但位于第二个 div 的右侧或下方。它会像以前的兄弟姐妹一样工作。
回答by Ben Rowe
This can not be done purely with css. This is a behaviour, which affects the styling of the page.
这不能完全用 css 来完成。这是一种影响页面样式的行为。
With jquery you can quickly implement the behavior from your question:
使用 jquery，您可以快速实现问题中的行为：
$(function() {
$('#a').hover(function() {
$('#b').css('background-color', 'yellow');
}, function() {
// on mouseout, reset the background colour
$('#b').css('background-color', '');
});
});
回答by Curt
The following example is based on jQuery but it can be achieved using any JS tool kit or even plain old JS
以下示例基于 jQuery，但可以使用任何 JS 工具包甚至普通的旧 JS 来实现
$(document).ready(function(){
$("#a").mouseover(function(){
$("#b").css("background-color", "red");
});
});
回答by kongr45gpen
A pure solution without jQuery:
没有 jQuery 的纯解决方案：
Javascript (Head)
Javascript（头）
function chbg(color) {
document.getElementById('b').style.backgroundColor = color;
}
HTML (Body)
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/
JSFiddle：http: //jsfiddle.net/YShs2/
