CSS :: Kind eingestellt, um die Farbe beim übergeordneten Hover zu ändern, aber ändert sich auch, wenn es selbst schwebte

Question

Ich habe einen Code, der die <a> als übergeordnete und <span> als Kind innerhalb hat. Ich habe ein CSS geschrieben, das die Rahmenfarbe des Kindes ändert, wenn es über dem Elternteil schwebt. Es funktioniert, wenn ich den Mauszeiger über den Elternteil halte, aber wenn ich den Mauszeiger über das Kind halte, ändert sich auch die Farbe und das sollte nicht der Fall sein.

si Hier einige Code:

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

Hier können Sie das Problem auf jsfiddle sehen: http://jsfiddle.net/vz9A9/

Könnte mir jemand es helfen, beheben Bitte?

Answer 1

CSS kann überschrieben werden.

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

verwenden:

.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

Wenn Sie sich über die Unterstützung alten Browsern nicht egal, können Sie :not() verwenden dieses Element auszuschließen:

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

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

Wenn Sie wollen tun, um sie zu unterstützen, Ich denke, Sie müssen entweder JavaScript verwenden oder überschreiben Sie die CSS-Eigenschaften erneut: