jQuery: Clase Toggle en mouseover / mouseout del elemento, pero mantener la clase si Haga clic dentro elemento?

Question

sospechar que estoy tratando de ser demasiado inteligente para mi propio bien con éste!

Estoy trabajando en una función plugin de jQuery que alternar una clase de encendido / apagado en un elemento cuando se pasa de entrada / salida, pero no elimina la clase si hace clic en el interior del elemento antes de salir flotando y no lo hace el elemento de palanca si ya tiene esa clase antes flotando en.

He intentado dar con lo siguiente:

    $.fn.showHover = function(settings) {
    this.bind('mouseover', function hoverIn(){
        if ($(this).hasClass('active') == false) {
            $(this).addClass('active');
            $(this).bind('click', function getFocus(){
              $(this).unbind('mouseout', hoverOut);
            })
            $(this).bind('mouseout', function hoverOut(){
              $(this).removeClass("active");
              $(this).unbind('click', getFocus);
            })
        }
    })
    return this;
};

... la idea si se pasa a cabo antes de hacer clic, retire la clase y haga clic unbind -. Si hace clic antes de salir flotando, mouseout unbind y la clase nunca se eliminado

Obviamente (ya que estoy pidiendo aquí para obtener ayuda!) No funciona -. La clase se elimina si hago clic en el interior del elemento antes de salir flotando o no

¿Alguien puede señalar por qué está fallando, y posiblemente sugerir una mejor manera de evitarlo? Gracias!

Answer 1

Si se cambia la apariencia del elemento es su objetivo a través de CSS, una solución fácil es simplemente agregar otro selector, con un nombre diferente.

.active_hover,
.active_click { ... }

A continuación, se unen el vuelo estacionario / unhover evento para añadir / quitar el "active_hover" clase, y el evento clic aquí para agregar la clase "active_click".

Answer 2

Usted puede hacer esto

$(".class").mouseenter( function(){
$(this).css("edit css"); // you can use .animate instead of .css if you want
});
$(".class").mouseleave( function(){
$(this).removeAttr('style');
});
$(".class").click( function(){
$(this).addClass("setactiveclass");
});

Así que cuando se pasa, una CSS en línea se establece y si se pasa fuera de la div el conjunto de estilo en línea por el jQuery se quita .. Y si hace clic en él. una clase dura se fija en él para que no interfiera con unos de otros.