Html css :hover 只影响嵌套的顶部 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6679283/
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 only affect top div of nest
提问by Patrick
Hi: got some html like:
嗨：有一些 html 像：
<div class="class" >
<div class="class" >
</div>
</div>
And some css like:
还有一些css，如：
div.class:hover
{
border-width:2px;
border-style:inset;
border-color:red;
}
When I hover over the inner div, both divs get the red border. Is it possible to stop the propagation and get the red border on the inner div using css?
当我将鼠标悬停在内部 div 上时，两个 div 都会获得红色边框。是否可以停止传播并使用css在内部div上获得红色边框？
Thanks.
谢谢。
EDIT : starting with the answer pointed to by borrible I ended up with:
编辑：从borrible指出的答案开始，我最终得到：
$("div.class").mouseover(
function(e) {
e.stopPropagation();
$(this).css("border-color", "red");
}).mouseout(
function() {
$(this).css("border-color", "transparent");
});
Shame it's not css but does the job. Thanks everyone, didn't get what I wanted but learned lots of new stuff. Ain't stack overflow great :)
可惜它不是 css 而是完成了这项工作。谢谢大家，没有得到我想要的东西，但学到了很多新东西。堆栈溢出不是很好:)
回答by imsky
Have a look at http://jsfiddle.net/n6rzA/
Code from there:
那里的代码：
<div class="c">
<div class="c"></div>
</div>
.c:hover {border:solid 1px red}
.c > .c:hover {border:solid 1px green}
回答by Sotiris
If the inner classis immediate child you can use the >. If it's not immediate child you can use space.
如果内部class是直接子级，则可以使用>. 如果它不是直接的孩子，你可以使用空间。
So in first case .class > class:hover { }and in second case .class .class:hover { }
所以在第一种情况.class > class:hover { }和第二种情况下.class .class:hover { }
First case : http://jsfiddle.net/wp4Jf/
第一种情况：http: //jsfiddle.net/wp4Jf/
Second case : http://jsfiddle.net/wp4Jf/2
第二种情况：http: //jsfiddle.net/wp4Jf/2
Keep in mind that >works for ie8+
请记住，这>适用于 ie8+
回答by guru_florida
Old question, but for those that land here I solved the issue by rethinking the html a bit to make the CSS simple. This solved my problem when creating html/css for nested ul/li tree views. Adding an item class div:
老问题，但对于那些降落在这里的人，我通过重新思考 html 使 CSS 变得简单来解决了这个问题。这解决了我在为嵌套的 ul/li 树视图创建 html/css 时的问题。添加项目类 div：
<div class="class" >
<div class="item">Parent</div>
<div class="class" >
<div class="item">Child</div>
</div>
</div>
Then I can apply CSS to "item" class and since item is not within item, ...within item, ...within item, the hover selector doesn't cascade up the node chain. So I colored the background of my tree view items on hover without splashing all parents.
然后我可以将 CSS 应用于“item”类，并且由于 item 不在 item 内，......在 item 内，......在 item 内，悬停选择器不会级联节点链。因此，我在悬停时为树视图项目的背景着色，而不会溅到所有父项。
回答by Rafael Rozon
I got the desired result by reworking a bit the html and using only css.
我通过修改 html 并仅使用 css 得到了想要的结果。
The HTML:
HTML：
<div class="wrapper" >
<div class="parent"></div>
<div class="child"></div>
</div>
And the CSS:
和 CSS：
.wrapper {
height: 500px;
width: 500px;
background-color: lightblue;
position: relative;
}
.parent {
height: 250px;
width: 250px;
background-color: lightgreen;
top: 3em;
left: 3em;
position: absolute;
}
.parent:hover {
border: 3px red solid;
}
.child {
height: 50px;
width: 50px;
background-color: lightgrey;
top: 5em;
left: 5em;
position: absolute;
}
.child:hover {
border: 3px red solid;
}
https://jsfiddle.net/rafaelrozon/pynngjpk/
https://jsfiddle.net/rafaelrozon/pynngjpk/
Basically instead of nesting the divs they can be siblings and then you can use css to make them look nested.
基本上，不是嵌套 div，它们可以是兄弟姐妹，然后您可以使用 css 使它们看起来嵌套。
I hope it helps others.
我希望它可以帮助其他人。
