CODEWITHSUNDEEP
jquerycss
frenchie
frenchie

Reputation: 51927

blocking CSS hover

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.

Upvotes: 0

Views: 65

Answers (2)

thecodeparadox
thecodeparadox

Reputation: 87073

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

Upvotes: 4

Alejandro B.
Alejandro B.

Reputation: 5092

Perhaps adding

.ButtonDisabled:hover{...}

would help you

Upvotes: 0

Related Questions