CSS ::孩子设置来改变父悬停颜色，但变化也徘徊时本身(CSS :: child set to c

我有一个<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> 

Answer 1:

更新

2013年以下是有道理的。然而，现在，我会用:not()所描述的选择如下 。

---

CSS可以被覆盖。

DEMO： http://jsfiddle.net/persianturtle/J4SUb/

用这个：

 .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> 

Answer 2:

如果你不关心支持旧的浏览器，你可以使用:not()排除元素：

.parent:hover span:not(:hover) {
    border: 10px solid red;
}

演示： http://jsfiddle.net/vz9A9/1/

如果你想支持他们，我在想你会需要再次使用JavaScript或覆盖的CSS属性：

.parent span:hover {
    border: 10px solid green;
}

文章来源: CSS :: child set to change color on parent hover, but changes also when hovered itself