JQuery: Schalterklasse auf Mausover/Mausout von Element, aber klicken Sie die Klasse, wenn Sie in Element klicken?

Question

Vermutlich, ich versuche, mit diesem zu schlau zu sein, zu meinem eigenen Wohl zu sein!

Ich arbeite an einer Jquery -Plugin -Funktion, die eine Ein/Aus -Ein- und Ausschalten eines Elements umschaltet Das Element hat diese Klasse bereits, bevor sie hineinschwebt.

Ich habe versucht, Folgendes zu finden:

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

... Die Idee, wenn Sie vor dem Klicken ausgehen, entfernen Sie die Klasse und klicken Sie nicht. Wenn Sie klicken, bevor Sie ausgehen, entfernen Sie Mausout und die Klasse wird nie entfernt.

Offensichtlich (da ich hier um Hilfe bittet!) Funktioniert es nicht - die Klasse wird entfernt, ob ich in das Element klicke, bevor ich schwebe oder nicht.

Kann jemand darauf hinweisen, warum es versagt, und schlägt möglicherweise einen besseren Weg vor? Vielen Dank!

Answer 1

Wenn das Erscheinungsbild des Elements Ihr Ziel durch CSS geändert wird, besteht eine einfache Lösung darin, einfach einen anderen Selektor mit einem anderen Namen hinzuzufügen.

.active_hover,
.active_click { ... }

Binden Sie dann das HOVER/LUT -Ereignis, um die Klasse "Active_Hover" und das Klickereignis hinzuzufügen/zu entfernen, um die Klasse "Active_click" hinzuzufügen.

Answer 2

Sie könnten das tun

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

Wenn Sie also schweben, wird ein Inline -CSS eingestellt, und wenn Sie aus der DIV schweben, wird der von JQuery festgelegte Inline -Stil entfernt. Und wenn Sie darauf klicken. Eine harte Klasse wird darauf eingestellt, sodass sie sich nicht stört.