CODEWITHSUNDEEP
htmlcss
frenchie
frenchie

Reputation: 51937

prevent css :hover on an element

Suppose I have this HTML:

<div class="SomeClass">test</div>
<div class="SomeClass" id="SomeID">test</div>
<div class="SomeClass">test</div>

with this CSS

.SomeClass{color:blue;}
.SomeClass:hover{color:red}

I want the hover effect not to apply to the SomeID div. I can do this with jQuery but I was wondering if there's an easier way to do it with just CSS.

Thanks for your suggestions.

Upvotes: 0

Views: 1312

Answers (4)

matthias.p
matthias.p

Reputation: 1544

Just overwrite the style:

#SomeID:hover {
    color:blue;
}

Alternatively, you could use:

.SomeClass:not(#SomeID):hover {
    color:red;
}

Then it is easier to change it, but less browser support.

Upvotes: 1

Nick Beranek
Nick Beranek

Reputation: 2751

Let's take a look at link pseudo-class specificity:

Remember: LAHV (:link, :active, :hover, :visited).

First, in order to cascade properly, let's assign the following to .SomeClass:

.SomeClass:link, .SomeClass:active, .SomeClass:visited { color: blue; }
.SomeClass:hover { color: red; }

Next, let's specify #SomeID:

#SomeID:hover { color: blue; }

id always takes precedence over class.

Upvotes: 0

Peter Duijnstee
Peter Duijnstee

Reputation: 3779

CSS is parsed in order, meaning that if after you define

.SomeClass:hover { color: red; }

You then define a rule

#SomeId.SomeClass:hover { color: blue; }

That should 'overwrite' the initial color: red;

Upvotes: 4

j08691
j08691

Reputation: 207901

Just assign another rule to the div with an id of SomeID. This will override the other rule.

.SomeClass{color:blue;}
.SomeClass:hover{color:red}
#SomeID:hover{color:blue}

jsFiddle example

Upvotes: 3

Related Questions