d-_-b
d-_-b

Reputation: 23171

Remove hover property for an element after it is declared in stylesheet

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

Answers (3)

d-_-b
d-_-b

Reputation: 23171

From what I gather...it's not possible :(

Upvotes: 0

Reuben
Reuben

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:

http://jsfiddle.net/MfqDg/

<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

zenkaty
zenkaty

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

Related Questions