CSS :: child设置为在主悬停上更改颜色,但是当它们本身悬停时也会发生更改

我有一个代码,< 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;
}

原文地址：https://www.jb51.cc/css/217311.html