Menu
I have this HTML code:
<ul> <li>Line 1</li> <li class="disabled">Line 2</li> </ul> And the corresponding CSS is:
ul li:hover { color: red; } This allows for both lis to be hovered over and have their color changed. But if I want one of them to be disabled, I’d use the following:
.disabled { color: grey; } But the other CSS code’s hover pseudo-class still has effect. Is there any way I can override this?
681
To remove the CSS hover effect from a specific element, you can set the pointer-events property of the element (the hover behavior of which you want to disable) to “none”.
To override the CSS properties of a class using another class, we can use the ! important directive. In CSS, ! important means “this is important”, and the property:value pair that has this directive is always applied even if the other element has higher specificity.
The :hover selector is used to select elements when you mouse over them. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.
Identify the ID of the categories widget in your output HTML. Let's say that id="widget-cat" , then create a CSS rule as follows to override the link colours within that widget, e.g. The use of !
The first rule overrides it because of CSS specificity, i.e. it's more specific.
Change second rule to:
ul li.disabled, ul li.disabled:hover{ color:grey; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
