blocking CSS hover

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.

thecodeparadox · Accepted Answer · 2012-04-28 04:17:32Z

4

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

edited Apr 28, 2012 at 4:17

answered Apr 27, 2012 at 16:21

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alejandro B. · Accepted Answer · 2012-04-27 16:20:58Z

0

Perhaps adding

.ButtonDisabled:hover{...}

would help you

answered Apr 27, 2012 at 16:20

Alejandro B.

5,1302 gold badges37 silver badges64 bronze badges

1 Comment

frenchie Over a year ago

The problem is that there are several other types of buttons, and so while the ButtonDisabled class sometimes applies to MyButton, it also applies to MyOtherButton and so the hovering of ButtonDisabled can take several forms.

Collectives™ on Stack Overflow

blocking CSS hover

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related