CODEWITHSUNDEEP
htmlcss
Jesse
Jesse

Reputation: 1225

CSS removing :hover properties

I have an unordered list of items which are alternating in background color via :nth-child(even). The items are also highlighted with a different background color when the mouse hovers over them via :hover

I need to be able to specify items so that they maintain the alternating background color, but do not get highlighted on hover.

I haven't been able to figure out a way to do this.

Here is a short example: http://jsfiddle.net/kjk8L/2/

Upvotes: 0

Views: 66

Answers (3)

Damien Black
Damien Black

Reputation: 5647

Ok, so it sounds (from your comment below) like you want to have a class that does not hover, but still maintains the alternating background.

Easiest way to do this is to simply define a class and exclude it from the hover css, like this:

ul li:not(.special):hover {
    background-color:blue;
}

This will make it so that hover is applied to everything except the 'special' class.

Working fiddle

Upvotes: 1

Raiyan
Raiyan

Reputation: 1687

This is how I do it, hope this helps.

ul li:nth-child(even) {
    background-color: #efffef;
}

ul li:nth-child(even):hover {
    background-color: #dfd;
}

/* you can skip styling of the odd children if you don't want to */
ul li:nth-child(odd) {
    background-color: #efefff;
}

ul li:nth-child(odd):hover {
    background-color: #ddf;
}

Upvotes: 0

Kyle Needham
Kyle Needham

Reputation: 3389

Add a hover style to the nth-child(even) like this

ul li:nth-child(even) {
    background-color: grey;
}

see the updated fiddle. http://jsfiddle.net/kjk8L/5/

Upvotes: 0

Related Questions