CSS :: child设置为在父级悬停上更改颜色，但在自身悬停时也会发生更改

Question

我的代码具有<a>作为父级，<跨度为>作为子级。我写了一些CSS，它在悬停在父项上时改变了孩子的边框颜色。当我将鼠标悬停在父项上时它有效，但如果我将鼠标悬停在子项上，它也会更改颜色，而不是。

这里对一些代码：

HTML

<a class="parent"> 
    Parent text 
    <span> 
     Child text 
    </span>  
</a> 

CSS

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

在这里你可以看到的jsfiddle问题： http://jsfiddle.net/vz9A9/

谁能帮我解决这请？

Answer 1

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; 
} 

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; 
}