JQuery: Togle Class On MouseOver/MouseOut of Element, mas mantenha a classe se clicar no elemento interno?

Question

Suspeito, estou tentando ser muito inteligente para o meu próprio bem com este!

Estou trabalhando em uma função de plug -in jQuery que atenda a uma classe ligada/desativada em um elemento quando você passa o passe, mas não remover a classe se você clicar dentro do elemento antes de passar o mouse e não alternar se o O elemento já tem essa classe antes de passar o mouse.

Eu tentei criar o seguinte:

    $.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;
};

... A ideia se você passar o mouse antes de clicar, remova a aula e não clique - se você clicar antes de passar o mouse, desbaste o mouseOut e a aula nunca será removida.

Obviamente (já que estou pedindo ajuda aqui!), Ele não funciona - a classe é removida, se eu clico dentro do elemento antes de passar ou não.

Alguém pode apontar por que está falhando e, possivelmente, sugerir uma maneira melhor de contornar isso? Obrigado!

Answer 1

Se alterar a aparência do elemento é o seu objetivo através do CSS, uma solução fácil é simplesmente adicionar outro seletor, com um nome diferente.

.active_hover,
.active_click { ... }

Em seguida, vincule o evento Mirsew/UNLOVER para adicionar/remover a classe "Active_hover" e o evento de clique para adicionar a classe "Active_Click".

Answer 2

Você poderia fazer isso

$(".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");
});

Então, quando você passa o mouse, um CSS embutido é definido e se você passar o passe da div, o estilo embutido definido pelo jQuery será removido. E se você clicar nele. Uma classe difícil é definida nela para que não interfira um com o outro.