Reputation: 23171
Is it possible to remove or cancel :hover
effects once it is declared in a stylesheet?
For example..
I have a class with a :hover
effect in the stylesheet. For one element in this class (and there are many), I'd want to not have these hover effects.
So rather than go thru each class where I'd want to do this, is there a way to simply cancel a :hover
effect? I'm thinking this may need some javascript.
update with a brief example:
.class1 {a bunch of properties that vary based on the class}
.class1:hover {a bunch of properties that vary based on the class}
.class2 {a bunch of properties that vary based on the class}
.class2:hover {a bunch of properties that vary based on the class}
For one element in one of these classes, I'd like it to not participate in the hovering festivities, but still want it to be in the class. I do not want to have to create new classes for just the hovering. Is this possible?
Upvotes: 1
Views: 312
Reputation: 2751
Without knowing your actual code or attributes that change on hover, one way to solve this would be to change the attribute back, for example:
<div class="class1"></div>
<div class="class1"></div>
<div class="class1"></div>
.class1{
width: 100px;
height: 100px;
border: 1px solid;
margin: 20px;
}
.class1:hover{
background: #000;
}
.class1:nth-child(2):hover{
background: none;
}
Upvotes: 2
Reputation: 1548
Just be more specific with your targeting. Say you have lots of things with a class "foo" - rather than using .foo:hover {color:red}
, and then p .foo:hover {color:black}
, table .foo:hover {color:black}
, just say .container p .foo:hover {color:red}
, then the other instances won't have the style applied. Does that make sense?
Upvotes: 0