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