CSS :: con thiết lập để thay đổi màu sắc trên di chuột mẹ, nhưng thay đổi cũng khi lơ lửng chính nó

Question

Tôi đang có mã có số <a> làm cha mẹ và <span> làm trẻ em bên trong. Tôi đã viết một số CSS mà thay đổi màu sắc biên giới của đứa trẻ khi di chuột qua cha mẹ. Nó hoạt động khi tôi di chuột qua cha mẹ, nhưng nếu tôi di chuột qua con nó cũng thay đổi màu sắc và nó không nên.

Đây si một số mã:

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

đây bạn có thể thấy vấn đề trên jsfiddle: http://jsfiddle.net/vz9A9/

thể bất cứ ai giúp tôi sửa chữa nó xin vui lòng?

Answer 1

Có thể ghi đè CSS.

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

Sử dụng này:

.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

Nếu bạn không quan tâm đến việc hỗ trợ các trình duyệt cũ, bạn có thể sử dụng :not() để loại trừ yếu tố:

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

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

Nếu bạn làm muốn hỗ trợ họ, tôi đoán bạn sẽ phải sử dụng JavaScript hoặc ghi đè lại thuộc tính CSS:

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