我有一个代码,< a>作为父项和< span>作为孩子在内.我已经写了一些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/
有人可以帮我修吗？
解决方法
CSS可以被覆盖.
演示：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;
}
