poner - ¿Cómo se agregan las pseudo clases a los elementos usando jQuery?
navbar bootstrap brand (3)
En CSS, al pasar el mouse sobre un elemento, puede especificar vistas para él usando la pseudo clase: hover:
.element_class_name:hover {
/* stuff here */
}
¿Cómo se puede usar jquery para agregar o "encender" esta pseudoclase? Normalmente, en jQuery, si quieres agregar una clase, debes hacer lo siguiente:
$(this).addClass("class_name");
He intentado "hover" pero esto literalmente agrega una clase llamada "hover" al elemento.
Si alguien sabe qué escribir, ¡házmelo saber! ¡Gracias!
Creo que no hay forma de hacerlo con jQuery o javascript.
Puede encontrar la misma respuesta en estas dos preguntas:
Haz un div en la página
<div id="Style">
<style>
.element_class_name:hover {
/* stuff here */
}
</style>
</div>
Y luego programáticamente codificar el estilo, es decir,
$("#Style").find("style").prepend("#" + this.id + ":hover, ");
Desafortunadamente, el elemento al que llamas tendrá que tener una identificación.
$("body").children().click(function(){
$("#Style").find("style").prepend("#" + this.id + ":hover, ");
});
/* demo */
* {
transition: opacity 1s;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="Style">
<style>
.element_class_name:hover {
opacity: 0 !important;
}
</style>
</div>
<button id="btn1">Add hover class here</button>
<button id="btn2">Add hover class here too</button>
<p id="Note">
To use this though, you''ll have to assign an id to that particular element though.
</p>
</body>
</html>
No puede forzar que se aplique cierta pseudo-clase usando jQuery. No es así como funcionan las pseudoclases (especialmente las pseudoclases dinámicas), ya que están diseñadas para seleccionar en función de información que no se puede expresar a través del DOM ( spec ).
Debes especificar otra clase para usar, luego agrega esa clase usando jQuery. Algo como esto:
.element_class_name:hover, .element_class_name.jqhover {
/* stuff here */
}
$(this).addClass("jqhover");
Alternativamente, podría buscar la regla .element_class_name:hover y agregar esa clase usando jQuery, sin tener que codificarla en su hoja de estilo. Es el mismo principio, sin embargo.