Override CSS rule class:hover to use original rule value from class

Question

Is it possible to cancel a class with hover rule so the rule uses the value from the class without the hover?

In this contrived example, my project has a stylesheet from a library that I've imported:

/* library.css */
.listItem {
  border-width: 2px;
  border-style: solid;
  border-color: green;
}

.listItem:hover {
  border-color: blue;
}

In my app I don't want the border color to change on hover. I want the border color to stay the same.

/* custom.css */
.listItem:hover {
 border-color: /* whatever value border-color is set to in .listItem */  
}

I know I could just set border-color in the custom.css example to green explicitly but I'm wondering if there is a more dynamic solution. I'm suspecting there isn't.

Thank you!

user_13592914 · Answer

If you use !important, than it will override everything but Javascript styles.

Here is your original example:

.listItem {
  border-width: 2px;
  border-style: solid;
  border-color: green;
}

.listItem:hover {
  border-color: blue;
}

#div {
  width: 100px;
  height: 100px;
}

And here is it with !important:

.listItem {
  border-width: 2px;
  border-style: solid;
  border-color: green !important;
}

.listItem:hover {
  border-color: blue;
}

#div {
  width: 100px;
  height: 100px;
}

Override CSS rule class:hover to use original rule value from class

1 Answers