Aquí hay un código

<button id="test" class="ui-state-hover" value="Button">

Contexto:

Estoy usando la clase CSS JQuery UI ui-state-hover en un botón HTML (quiero que ese botón siempre se vea como si estuviera al pasar el mouse). Pero esa clase sigue desapareciendo cuando mouseout otro elemento de la interfaz de usuario de JQuery, supongo que este es un comportamiento normal,

<button id="test" class="" value="Button">

Así que pensé que en ese elemento JQuery en particular debe haber una línea de código similar a esta:

$('.ui-state-hover').on('mouseout', function(){$(this).removeClass('ui-state-hover');})

Que eliminan la clase en cada elemento que tiene la clase. Así que creo que solo tendría que tener una clase propia con el mismo CSS que ui-state-hover pero con un nombre diferente. ¡Entonces podría darle a ese elemento la copia y POUF! ¡problema resuelto!

MyCssClass = ui-state-hover
<butotn id="test" class="MyCssClass" value="Button">

Por lo tanto, necesita una forma de copiar el contenido de una clase CSS a otra. Preferiría tener una respuesta CSS pura, pero si no existiera, JQuery o Javascript lo harían.

Pensé en usar algo como esto, pero parece una tontería, no funciona.

$('.MyCssClass').css($('.ui-state-hover').css());

¡Gracias!

EDITAR:

Aquí hay un poco más sobre lo que intentó hacer.

Pongo un tono sh * t de diferentes JQuery Theme en un directorio y, según la elección de los usuarios, cambio el archivo .css y vuelvo a cargar la página. Como cada tema o casi todos los temas tienen las mismas clases, son intercambiables. Por lo tanto, ui-state-hover podría tener un color de fondo negro en el tema de interfaz de usuario JQuery ui-darkness, pero en el fondo del tema de interfaz de usuario JQuery Ulightness podría ser gris.

Es por eso que necesito copiar dinámicamente algunos de los que están cargados en la página en mi propia clase y no puedo simplemente copiar / pegar el contenido del archivo .css.

EDITAR:

Aquí hay un violín que ilustra mi problema:

http://jsfiddle.net/yr89tg9g/

¿Ves cómo cuando pasas el mouse sobre test2 pierde la clase ui-state-hover? Para detener esto, me cuesta clonar la clase, pero parece que no se puede hacer ...

0
Sebastien 28 ago. 2014 a las 19:12

2 respuestas

La mejor respuesta

¿Tal vez esto?

$("#myButton").on("mouseout blur", function(){
    $(this).addClass("ui-state-hover");
});
0
Manuel Romero 28 ago. 2014 a las 15:57

Probablemente eso resuelva la Q:

Un css es solo una etiqueta y HTML. Puede tener una identificación:

<style type="text/css" id="sourcecss">
/* your definition here */
</style>

Y por lo tanto:

jQuery("head").append('<style type="text/css" id="targetcss"></style)');
jQuery("#targetcss").html( jQuery("#sourcecss").html() );

Funciona como un encanto en una de nuestras aplicaciones.

0
Axel Amthor 28 ago. 2014 a las 15:35