Question

I have a button with class MyButton defined somewhat like this:

.MyButton{
 color:black;
 background:white;}

.MyButton:hover{
 color:white;
 background:black;}

This button class is for a pager button and when the pager is at bounds, I add this class to it:

.ButtonDisabled{
 opacity:0.3}

The issue is that if the user mouses over the button, it still inherits from the MyButton:hover style.

I know I could control all this with jquery to solve the hovering issue but I’m wondering if there’s a way to prevent the hover class from triggering when the button also has the class ButtonDisabled.

Thanks.

Answer 1

.MyButton:hover{
 color:white;
 background:black;

}

// has more specificity than above selector, so it will stop previous hover effect
.MyButton.ButtonDisabled:hover{
 // write your configs
}