jquery: Bascule la classe au survol de la souris sur mouseover/mouseout de l'élément, mais conserve la classe si on clique dans l'élément?

Question

Je suppose que j'essaie d'être trop intelligent pour mon propre bien avec celui-ci! Je travaille sur une fonction plugin jQuery qui va activer/désactiver une classe sur un élément lorsque vous passez la souris sur/in, mais ne supprime pas la classe si vous cliquez à l'intérieur de l'élément avant de planer et doesn ' . t bascule si l'élément a déjà cette classe avant planant dans

j'ai essayé de venir avec les éléments suivants:

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

... l'idée si vous passez la souris sur avant de cliquer, supprimer la classe et cliquez unbind - Si vous cliquez avant de planer, décompressez mouseout et la classe ne sera jamais supprimée.

Évidemment (puisque je demande de l'aide ici!) Cela ne fonctionne pas - la classe est supprimée si je clique à l'intérieur de l'élément avant de planer ou non.

Quelqu'un peut-il indiquer pourquoi il est défaillant, et peut-être suggérer un meilleur moyen de contourner le problème? Merci!

Answer 1

Si la modification de l'apparence de l'élément est votre objectif via CSS, une solution simple consiste simplement à ajouter un autre sélecteur, avec un nom différent.

.active_hover, 
.active_click { ... } 

lient ensuite le vol stationnaire/événement unhover pour ajouter/supprimer la classe « active_hover », et l'événement cliquez pour ajouter la classe « active_click ».

Answer 2

Vous pouvez le faire

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

Ainsi, lorsque vous passez la souris, un autocommutateur en ligne est réglé et si vous placez le curseur de la div style en ligne définie par le jquery, est supprimé .. Et si vous cliquez dessus . une classe dure est fixée dessus pour ne pas interférer les uns avec les autres.