HoGo HoGo - 5 months ago 27
CSS Question

CSS :: child set to change color on parent hover, but changes also when hovered itself

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.

Here si some code:

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


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

Could anyone help me fix it please?

Answer

CSS can be overwritten.

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

Use this:

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