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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   x000D   x000D   active     background  red    x000D   lt div onmouseover className  active  gt    Hover this   lt  div gt  x000D   x000D   x000D

User · Answer

This is how you do it   var e   document getElementById  myIdName    var value   window getComputedStyle e  null  getPropertyValue  zIndex    alert  z-index      value

User · Answer

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

User · Answer

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      amp  hover        extend  first-class

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

Examples related to css

Examples related to addclass