CSS :: child zestaw do zmiany koloru na zawisie nadrzędnym, ale zmienia się również, gdy się unosi.

Question

Mam kod, który ma <a> jako rodzic i <zakres> jako dziecko wewnątrz. Napisałem trochę kodu CSS, który zmienia kolor obramowania dziecka, gdy unosi się nad rodzicem. Działa, gdy umieściłem kursor nad rodzicem, ale jeśli umieściłem kursor nad dzieckiem, zmienia on również kolor i nie powinien.

Tu Si jakiś kod:

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

Tutaj można zobaczyć problem na jsfiddle: http://jsfiddle.net/vz9A9/

Czy ktoś pomoże mi rozwiązać Proszę?

Answer 1

CSS może zostać nadpisany.

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

Użyj tego:

.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

Jeśli nie dbają o wspieranie starych przeglądarek, można użyć :not() wykluczyć, że element:

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

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

Jeśli zrobić chce je wspierać, Myślę, że będziesz musiał albo użyć JavaScript albo zastąpić właściwości CSS ponownie:

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