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

You shouldn't use and avoid using !important in this case, because you can solve it with Specifity:

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When specificity is equal to any of the multiple declarations, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted element will always take precedence over rules which an element inherits from its ancestor.

source: https://developer.mozilla.org/en/docs/Web/CSS/Specificity

---

In your case the .delDoc:hover is less specific as the .liDoc:hover > .delDoc. So simply replace the .delDoc:hover with .liDoc > .delDoc:hover or .liDoc:hover > .delDoc:hover.

Please do not use !important! The use of !important should be discouraged!

---

The Code (https://jsfiddle.net/zt393xjm/4/):

.delDoc {
  color: transparent;
  font-size: 12px;
  cursor: pointer;
}
.liDoc:hover > .delDoc {
  color: silver;
}
.liDoc > .delDoc:hover {
  color: red;
}

  
My link  icon