CSS：悬停一个元素，对多个元素有影响吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1462360/
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 one element, effect for multiple elements?
提问by Marko
I'm looking for a method for my hovering issue.
我正在寻找一种解决悬停问题的方法。
<div class="section">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
Now, both classes, image and layer, have borders. Both have different color for normal and hover. Is there way to make it, so if I hover layer class, both layer and image class hovering border color is active? And vise versa?
现在，图像和图层这两个类都有边框。两者都有不同的正常和悬停颜色。有没有办法做到，所以如果我悬停图层类，图层和图像类悬停边框颜色都处于活动状态？反之亦然？
回答by corymathews
You don't need JavaScript for this.
为此，您不需要 JavaScript。
Some CSS would do it. Here is an example:
一些 CSS 会做到这一点。下面是一个例子：
<html>
<style type="text/css">
.section { background:#ccc; }
.layer { background:#ddd; }
.section:hover img { border:2px solid #333; }
.section:hover .layer { border:2px solid #F90; }
</style>
</head>
<body>
<div class="section">
<img src="myImage.jpg" />
<div class="layer">Lorem Ipsum</div>
</div>
</body>
</html>回答by Steve Wortham
This worked for me in Firefox and Chrome and IE8...
这在 Firefox、Chrome 和 IE8 中对我有用......
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
div.section:hover div.image, div.section:hover div.layer {
border: solid 1px red;
}
</style>
</head>
<body>
<div class="section">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
</body>
</html>
... you may want to test this with IE6 as well (I'm not sure if it'll work there).
...你可能也想用 IE6 测试这个（我不确定它是否可以在那里工作）。
回答by Viliam
I think the best option for you is to enclose both divs by another div. Then you can make it by CSS in the following way:
我认为对您来说最好的选择是用另一个 div 将两个 div 括起来。然后你可以通过以下方式通过CSS制作它：
<html>
<head>
<style>
div.both:hover .image { border: 1px solid blue }
div.both:hover .layer { border: 1px solid blue }
</style>
</head>
<body>
<div class="section">
<div class="both">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
</div>
</body>
</html>
回答by eykanal
This is not difficult to achieve, but you need to use the javascript onmouseoverfunction. Pseudoscript:
这个不难实现，但是需要用到javascriptonmouseover函数。伪脚本：
<div class="section ">
<div class="image"><img src="myImage.jpg" onmouseover=".layer {border: 1px solid black;} .image {border: 1px solid black;}" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
Use your own colors. You can also reference javascript functions in the mouseover command.
使用你自己的颜色。您还可以在 mouseover 命令中引用 javascript 函数。
回答by inkedmn
You'd need to use JavaScript to accomplish this, I think.
我认为您需要使用 JavaScript 来完成此操作。
jQuery:
jQuery：
$(function(){
$("#innerContainer").hover(
function(){
$("#innerContainer").css('border-color','#FFF');
$("#outerContainer").css('border-color','#FFF');
},
function(){
$("#innerContainer").css('border-color','#000');
$("#outerContainer").css('border-color','#000');
}
);
});
Adjust the values and element id's accordingly :)
相应地调整值和元素 ID :)
回答by Jnr
OR
或者
.section:hover > div {
background-color: #0CF;
}
NOTE Parent element state can only affect a child's element state so you can use:
注意父元素状态只能影响子元素的状态，因此您可以使用：
.image:hover + .layer {
background-color: #0CF;
}
.image:hover {
background-color: #0CF;
}
but you can notuse
但你不能使用
.layer:hover + .image {
background-color: #0CF;
}
