Html CSS :: child 设置为在父悬停时更改颜色，但在悬停时也会更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14792574/
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 :: child set to change color on parent hover, but changes also when hovered itself
提问by HoGo
I have an <a>with a <span>children. I have written some CSS which changes the border-color of the children when the parent is hovered, but it also changes the border-color when I hover the children, which it shouldn't.
我有<a>一个<span>孩子。我编写了一些 CSS，它在父级悬停时更改子项的边框颜色，但是当我悬停子项时它也会更改边框颜色，这是不应该的。
a {
padding: 50px;
border: 1px solid black;
}
a span {
position: absolute;
top: 200px;
padding: 30px;
border: 10px solid green;
}
a:hover span {
border: 10px solid red;
} <a>
Parent text
<span>Child text</span>
</a>回答by Raphael Rafatpanah
Update
更新
The below made sense for 2013. However, now, I would use the :not()selector as described below.
2013年以下是有道理的。然而，现在，我会使用:not()所描述的选择如下。
CSS can be overwritten.
CSS 可以被覆盖。
DEMO: http://jsfiddle.net/persianturtle/J4SUb/
演示：http: //jsfiddle.net/persianturtle/J4SUb/
Use this:
用这个：
.parent {
padding: 50px;
border: 1px solid black;
}
.parent span {
position: absolute;
top: 200px;
padding: 30px;
border: 10px solid green;
}
.parent:hover span {
border: 10px solid red;
}
.parent span:hover {
border: 10px solid green;
}<a class="parent">
Parent text
<span>Child text</span>
</a>回答by Blender
If you don't care about supporting old browsers, you can use :not()to exclude that element:
如果您不关心支持旧浏览器，您可以使用:not()来排除该元素：
.parent:hover span:not(:hover) {
border: 10px solid red;
}
Demo: http://jsfiddle.net/vz9A9/1/
演示：http: //jsfiddle.net/vz9A9/1/
If you dowant to support them, the I guess you'll have to either use JavaScript or override the CSS properties again:
如果您确实想支持它们，我想您将不得不使用 JavaScript 或再次覆盖 CSS 属性：
.parent span:hover {
border: 10px solid green;
}
