How do I add a new class to an element dynamically?

Question

Is there any way to add a new CSS class to an element on :hover?

Like for jQuery, but translated into CSS:

$(element).addClass('someclass');

Not with just CSS. jQuery or js is the only way to actually change the class of an element dynamically. — Rick Calder, Oct 14 '12 at 22:03

score 33 · Accepted Answer · edited Jul 07 '16 at 14:33

33

Short answer no :)

But you could just use the same CSS for the hover like so:

a:hover, .hoverclass {
    background:red;
}

Maybe if you explain why you need the class added, there may be a better solution?

edited Jul 07 '16 at 14:33

IanS

15,771
9
60
84

answered Oct 14 '12 at 22:04

Rene Koch

1,252
10
24

"You could just" in your contrived simple example; there are situations when it would be useful, when "you could just" doesn't apply. – Kaz Mar 09 '22 at 00:18

Nate · Answer 2 · 2016-04-07T16:33:02.383

Since everyone has given you jQuery/JS answers to this, I will provide an additional solution. The answer to your question is still no, but using LESS (a CSS Pre-processor) you can do this easily.

.first-class {
  background-color: yellow;
}
.second-class:hover {
  .first-class;
}

Quite simply, any time you hover over .second-class it will give it all the properties of .first-class. Note that it won't add the class permanently, just on hover. You can learn more about LESS here: Getting Started with LESS

Here is a SASS way to do it as well:

.first-class {
  background-color: yellow;
}
.second-class {
  &:hover {
    @extend .first-class;
  }
}

score 7 · Answer 3 · answered Oct 14 '12 at 22:03

7

CSS really doesn't have the ability to modify an object in the same manner as JavaScript, so in short - no.

answered Oct 14 '12 at 22:03

Fluidbyte

5,162
9
47
76

score 3 · Answer 4 · answered Oct 14 '12 at 22:03

:hover is a pseudoclass, so you can put your CSS declarations there:

a:hover {
    color: #f00;
}

You can also use a list of selectors to apply CSS declarations to a hovered element or an element with a certain class:

.some-class,
a:hover {
    color: #f00;
}

score 1 · Answer 5 · answered Feb 21 '15 at 03:34

1

why @Marco Berrocl get a negative feedback and his answer is totally right what about using a library to make some animation so i need to call the class in hover to element not copy the code from the library and this will make me slow.

so i think hover not the answer and he should use jquery or javascript in many cases

answered Feb 21 '15 at 03:34

4

The second sentence of Marco's answer is factually incorrect - there is a difference between "need to use" and "can use". Also, please consider using punctuation to improve the readability of your answers, especially for non-native speakers like myself. ;) – hmundt Sep 16 '16 at 12:08

score 0 · Answer 6 · answered Nov 14 '20 at 09:09

0

Yes you can - first capture the event using onmouseover, then set the class name using Element.className.

If you like to add or remove classes - use the more convenient Element.classList method.

.active {
  background: red;
}

<div onmouseover=className="active">
  Hover this!
</div>

answered Nov 14 '20 at 09:09

Eran W

1,696
15
20

1

OP asked for a CSS solution ... onmouseover=className="active" <-- this is JS – Rene Koch Nov 24 '20 at 22:33
Good job answering the question's title! – Kaz Mar 09 '22 at 00:20

score -2 · Answer 7 · answered Oct 14 '12 at 22:03

-2

Using CSS only, no. You need to use jQuery to add it.

answered Oct 14 '12 at 22:03

Marco Berrocal

362
1
10

29

You only need javascript to do it – Zach Saucier Oct 23 '13 at 17:28

How do I add a new class to an element dynamically?

7 Answers7