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

Try this: https://jsfiddle.net/16Lr39mh/

Here I use .liDoc .delDoc:hover to make color change on hover.

Answer 2

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/

Answer 3

You were almost there. The problem is that the first selector is more specific than the second and therefore it takes precedence. You can easily fix that without any !important keywords by simply specializing the second selector:

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
  <li class="liDoc"><a href="">My link</a> <i class="fa fa-trash delDoc">icon</i></li>
</ul>

Answer 4

You need to style the link itself not the element around it. Add a class to the a element.

 <ul>
  <li class="liDoc"><a class="button" href="">My link</a> <i class="fa fa-trash delDoc">icon</i></li>
</ul>

Then you can do the following

a.button:link{
  color:red;
}

a.button:hover{
  color:yellow;
}

Answer 5

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
  <li class="liDoc"><a href="">My link</a>  <i class="fa fa-trash delDoc">icon</i>
  </li>
</ul>