CSS cancel property by overriding class

Question

I have following html:

    <div class="red placeholder"></div>
    <div class="blue placeholder"></div>
    <div class="green placeholder"></div>

and CSS:

 .placeholder {
    width: 100px;
    height: 100px;
    margin: 10px;
    border: 1px solid black;
}
.placeholder:hover {
    background-color: gray;
}
.red {
    background-color: red;
}
.blue {
    background-color: blue;
}
.green {
    background-color: green;
}

I should not change initial placeholder declaration(s) and I don't want DIVs to change colour on hover. Is there any way I can override placeholder class to "cancel" or turn off that hover property?

jsFiddle: http://jsfiddle.net/8QJEq/4/

can you be more specific???you said "I don't want DIVs to change colour on hover. "...but your declaring `placeholder:hover`.... — RbG, Aug 17 '13 at 10:52
That's a duplicate of: [Can I disable a CSS :hover effect via JavaScript?](http://stackoverflow.com/questions/2754546/can-i-disable-a-css-hover-effect-via-javascript) — Itay, Aug 17 '13 at 10:53

score 1 · Answer 1 · answered Aug 17 '13 at 10:54

That was really a good question, since am not able to work out any easier way than this, you can check out my solution

div[class="red placeholder"]:hover {
    background-color: red;
}

div[class="blue placeholder"]:hover {
    background-color: blue;
}

div[class="green placeholder"]:hover {
    background-color: green;
}

Demo

Explanation: What we are doing here is, we are selecting the elements having a combination of 2 classes, and than we use the same color on hover, which is their default background-color, so inshort, this won't take out the hover, it does hover, but because of the same background color, you won't see any change.

@thgaskell got some habit to overthink :D – Mr. Alien Aug 17 '13 at 12:07 — Mr. Alien, Aug 17 '13 at 12:07

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

I would recommend to avoid targeting the elements in the first place if at all possible.

If that's not possible, you could just declare the hover state with each color. As long as .color:hover is declared after .placeholder:hover it will override it since they share the same specificity.

jsfiddle 1

CSS

.color, .color:hover { background-color: color; }

Though I wouldn't recommend it, but it sounds like you don't want divs with color classes to not change background-color you could also just declare the rules as !important. But this would only be a last resort option since you wouldn't be able to easily override the background-color again.

jsfiddle 2

CSS

.color { background-color: color !important; }

CSS cancel property by overriding class

2 Answers2

CSS

CSS