Css Change Color On Hover

October 26, 2023 Post a Comment

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. I tried: H

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

<linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /><ul><liclass="liDoc"><ahref="">My link</a><iclass="fa fa-trash delDoc">icon</i></li></ul>

Solution 2:

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

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

Solution 3:

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/

Solution 4:

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

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

Then you can do the following

a.button:link{
  color:red;
}

a.button:hover{
  color:yellow;
}

Solution 5:

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

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

Html5 Lite