本文介绍了CSS :: child设置为在父悬停时更改颜色,但是当悬停本身时也会更改颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个代码,它具有< 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的问题:
Here you can see the problem on jsfiddle:http://jsfiddle.net/vz9A9/
任何人都可以帮我解决这个问题?
Could anyone help me fix it please?
推荐答案
CSS可以被覆盖。
DEMO:
使用此:
.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设置为在父悬停时更改颜色,但是当悬停本身时也会更改颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!