CSS :: child设置为在父悬停时更改颜色，但是当悬停本身时也会更改颜色 [英] CSS :: child set to change color on parent hover, but changes also when hovered itself

问题描述

我有一个代码，它具有< a>作为父级和< span>作为孩子内。我写了一些CSS，改变孩子的边框颜色时悬停在父母。

I am having a code that has the <a> as parent and <span> as child within . I have written some CSS which changes border color of the child when hovered over parent. It works when I hover over parent, but if I hover over child it also changes color and it shouldn't.

这里有一些代码：

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/

Here you can see the problem on jsfiddle: http://jsfiddle.net/vz9A9/

任何人都可以帮我解决这个问题？

Could anyone help me fix it please?

推荐答案

CSS可以被覆盖。

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

这篇关于CSS :: child设置为在父悬停时更改颜色，但是当悬停本身时也会更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！