CSS :: figlio impostato per cambiare colore su hover genitore, ma cambia anche quando si libra su se stesso

Question

Sto avendo un codice che ha il <a> come genitore e <span> come figlio dentro. Ho scritto alcuni CSS che cambiano il colore del bordo del bambino quando si libra sopra il genitore. Funziona quando passo il mouse sopra il genitore, ma se passa il mouse sopra il bambino cambia anche il colore e non dovrebbe.

Qui SI po 'di codice:

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

Qui potete vedere il problema da jsfiddle: http://jsfiddle.net/vz9A9/

qualcuno potrebbe aiutarmi a risolvere il problema per favore?

Answer 1

CSS può essere sovrascritto.

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

Utilizzare questa:

.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

Se non si cura di sostenere vecchi browser, è possibile utilizzare :not() per escludere quell'elemento:

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

Demo: http://jsfiddle.net/vz9A9/1/

Se fai vogliono sostenerli, suppongo che dovrai utilizzare JavaScript o modificare di nuovo le proprietà CSS:

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