CSS Change color on hover

Question

I\'m trying to override my first \"color change\" with a second. I\'d like to have a silver color on my icon, when hover the text, and red color icon when hovering the icon.

Answer 1

The thing is, your first selector is more specific:

So this selector: .liDoc:hover > .delDoc is more specific than .delDoc:hover.

When you inspect the element, you'll see the .delDoc:hover style, with color: red get applied, but gets overridden by the .liDoc:hover > .delDoc due to specificity.

The easiest solution is to use an !important:

.delDoc:hover { color: red !important; }

But using an important is concidered as a bad practise.

Another solution is to make the second selector more specific than the first:

.liDoc:hover > .delDoc:hover {
    color: red;
}

A little cleanup could lead to this: https://jsfiddle.net/zt393xjm/2/