CSS：悬停在其他元素上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11507481/
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
CSS :hover on other element?
提问by Sven
Short question: Why does the background-colorof .bdoes not change when I hover? .a?
简短的问题：为什么当我悬停时background-colorof.b不会改变？.a?
CSS
CSS
.a {
color: red;
}
.b {
color: orange;
}
.a:hover .b {
background-color: blue;
}
HTML
HTML
<div id="wrap">
<div class="a">AAAA</div>
<div class ="b">BBBB</div>
</div>
回答by Ana
You need to have .a:hover + .binstead of .a:hover .b
你需要有.a:hover + .b而不是.a:hover .b
.a:hover .bwould work for a structure like
.a:hover .b将适用于像这样的结构
<div class="a">AAAA
<div class ="b">BBBB</div>
</div>
If at some point you'll need to have some elements between .a and .b, then you'll need to use .a:hover ~ .b, which works for all siblings of .acoming after it, not just the next one.
如果在某个时候你需要在 .a 和 .b 之间有一些元素，那么你需要使用.a:hover ~ .b，它适用于所有跟随.a它的兄弟姐妹，而不仅仅是下一个。
回答by Josh
Can you not do something like a:hover + b? see http://meyerweb.com/eric/articles/webrev/200007a.html
你不能做这样的事情a:hover + b吗？见http://meyerweb.com/eric/articles/webrev/200007a.html
回答by Stano
You can use + selector
您可以使用 + 选择器
.a:hover + .b {
background-color: blue;
}
to apply the css for sibling element, or
为同级元素应用 css，或
.a:hover > .b {
background-color: blue;
}
for nested class.
对于嵌套类。
回答by Tallboy
because .b isn't a child of .a, so that selector isn't finding anything. Use javascript to do what you want to do there.
因为 .b 不是 .a 的孩子，所以选择器没有找到任何东西。使用 javascript 做你想做的事。
回答by Jrod
There are two things you can do.
你可以做两件事。
Either change your HTML to make .ba child of .a
要么更改您的 HTML 以使其.b成为.a
<div id="wrap">
<div class="a">AAAA
<div class ="b">BBBB</div>
</div>
</div>
OR
或者
Change your css to use the adjacent selector
更改您的 css 以使用相邻的选择器
.a:hover + .b {
background-color: blue;
}
回答by Nicholas King
no js needed http://jsfiddle.net/2NEgt/3/
不需要 js http://jsfiddle.net/2NEgt/3/
回答by zdifahk
try to understanding this example:
html code
试着理解这个例子：
html代码
<p>Hover over 1 and 3 gets styled.</p>
<div id="one" class="box">1</div>
<div id="two" class="box">2</div>
<div id="three" class="box">3</div>
<!--css-->
#one:hover ~ #three{
background-color: black;
color: white;
}
.box {
cursor: pointer;
display: inline-block;
height: 30px;
line-height: 30px;
margin: 5px;
outline: 1px solid black;
text-align: center;
width: 30px;
}
when you hover on the box 1 than the box 3 will get black color
当您将鼠标悬停在框 1 上时，框 3 将变为黑色
回答by Ivan Carrasco Quiroz
Jquery is a good and easy solution:
Jquery 是一个很好且简单的解决方案：
html:
html：
<div class="a">AAA</div>
<div class="b">BBB</div>
script:Put this script into your html if you want. That's all.
脚本：如果需要，将此脚本放入您的 html 中。就这样。
<script>
$(".a").mouseover(function(){
$(".b").css("color", "blue");
});
$(".a").mouseleave(function(){
$(".b").css("color", "red");
});
</script>
回答by Madara's Ghost
You shouldn't change a sibling's style when an event occurs on a different element. It's out of the context of CSS.
当事件发生在不同元素上时，您不应更改同级元素的样式。它脱离了 CSS 的上下文。
Use JavaScript to achieve this, for example:
使用 JavaScript 来实现这一点，例如：
var wrap = document.getElementById("wrap");
var aDiv = wrap.getElementsByClassName("a")[0];
var bDiv = wrap.getElementsByClassName("b")[0];
aDiv.onmouseover = function() {
bDiv.style.backgroundColor = "red";
};
aDiv.onmouseout = function() {
bDiv.style.backgroundColor = "white";
};
