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

I have an <a> with a <span> children. I have written some CSS which changes the border-color of the children when the parent is hovered, but it also changes the border-color when I hover the children, which it shouldn't.

a {
    padding: 50px;
    border: 1px solid black;
}

a span {
    position: absolute;
    top: 200px;
    padding: 30px;
    border: 10px solid green;
}

a:hover span {
    border: 10px solid red;
}

<a>
    Parent text
    <span>Child text</span>    
</a>

Edit Report

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

0 Answers

Your Answer