CSS :: childは親のホバーで色を変更するように設定されていますが、ホバリングしたときにも変更されます

Question

<は親として>、子孫には<スパン>のコードを持っています。私は、親の上にぶら下がったときに子供の境界線の色を変更するいくつかの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/

誰も私はそれを修正する助けてもらえここ

は、いくつかのコードをSIお願いします？

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