30

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');
1
  • 3
    Not with just CSS. jQuery or js is the only way to actually change the class of an element dynamically. Oct 14, 2012 at 22:03

7 Answers 7

34

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?

1
  • "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 9, 2022 at 0:18
24

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;
  }
}
7

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

3

: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;
}
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

1
  • 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, 2016 at 12:08
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>

2
  • 1
    OP asked for a CSS solution ... onmouseover=className="active" <-- this is JS
    – Rene Koch
    Nov 24, 2020 at 22:33
  • Good job answering the question's title!
    – Kaz
    Mar 9, 2022 at 0:20
-2

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

1
  • 30
    You only need javascript to do it Oct 23, 2013 at 17:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.