que - selectores avanzados css

¿Cómo agrego dinámicamente una nueva clase a un elemento?

Question

¿Hay alguna forma de agregar una nueva clase CSS a un elemento en :hover ?

Como para jQuery, pero traducido a CSS:

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

Answer 1

Así es como lo haces:

var e = document.getElementById(''myIdName'');
var value = window.getComputedStyle(e, null).getPropertyValue("zIndex");
alert(''z-index: '' + value);

Answer 2

CSS realmente no tiene la capacidad de modificar un objeto de la misma manera que JavaScript, por lo que en breve, no.

Answer 3

Dado que todos le han dado respuestas jQuery / JS a esto, le proporcionaré una solución adicional. La respuesta a su pregunta sigue siendo no, pero al usar LESS (un Pre-procesador de CSS) puede hacerlo fácilmente.

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

Sencillamente, cada vez que se .second-class sobre la .second-class , se le asignarán todas las propiedades de .first-class . Tenga en cuenta que no agregará la clase de forma permanente, solo al pasar el mouse. Puede aprender más acerca de LESS aquí: Comenzando con LESS

Aquí hay una manera SASS de hacerlo también:

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

Answer 4

Respuesta corta no :)

Pero puedes usar el mismo CSS para el desplazamiento así:

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

Tal vez si explica por qué necesita que se agregue la clase, ¿puede haber una mejor solución?

Answer 5

Usando solo CSS, no. Necesitas usar jQuery para agregarlo.

Answer 6

por qué @Marco Berrocl recibe una respuesta negativa y su respuesta es totalmente correcta sobre el uso de una biblioteca para hacer un poco de animación, así que necesito llamar a la clase al pasar el elemento para no copiar el código de la biblioteca y esto me hará lento.

así que creo que no es la respuesta y debería usar jquery o javascript en muchos casos

Answer 7

:hover es una pseudoclase, así que puedes poner tus declaraciones CSS allí:

a:hover {
color: #f00;
}

También puede utilizar una lista de selectores para aplicar declaraciones CSS a un elemento desplazado o un elemento con una clase determinada:

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