Comment supprimer / basculer la classe de survol sur un élément (traduit au clic) sans avoir à déplacer la souris à nouveau?

Si vous cliquez et ne déplacez pas votre souris, la couleur du bouton restra rouge! Ce que je veux accomplir, c’est que lorsque vous cliquez et ne déplacez pas la souris, elle supprime / active .hover classe .hover .

Exemple sur jsFiddle

 $(function() { var $Btn = $('.button'); $Btn.hover(function() { $(this).toggleClass("hover"); }); $Btn.on("click", function() { $(this).toggleClass('active') $('.move').toggleClass('angle'); }); });

 .move { border: 1px solid #000000; padding: 10px; transition: transform .2s ease; /* have noticed issue is in "transition" */ } .button.hover { color: red; } .angle { transform: translate(100px, 0); }

L’élément conserve la classe de hover même après avoir cliqué sur le bouton (et le conteneur est traduit) car le navigateur ne semble pas appeler le survol (ou la souris) jusqu’à ce que la souris soit réellement déplacée.

Une façon de résoudre ce problème consiste à supprimer la classe de hover dans le gestionnaire d’événements click du bouton. Mais pour que cela fonctionne, le code du gestionnaire d’événement hover doit être modifié pour append spécifiquement une classe au passage de la souris (hover-in) et la supprimer lors du mouseout (hover-out). Cela est nécessaire car, conformément au code actuel, même si la classe de hover est supprimée dans le gestionnaire d’événements click, elle est basculée au moment où la souris est de nouveau déplacée (car, à ce moment-là, le gestionnaire de hover ne voit pas la classe. sur l’élément).

La modification du code peut en réalité être effectuée de deux manières: soit en utilisant des fonctions de mouseover et de mouseout mouseover séparées (comme dans mon violon d’origine), soit en transmettant deux fonctions distinctes au gestionnaire de survol. Lorsque deux fonctions sont passées, la première est appelée en survol et la seconde en survol.

 $(function () { var $Btn = $('.button'); $Btn.hover(function () { $(this).addClass("hover"); },function () { $(this).removeClass("hover"); }); /* first function is executed on mouseover, second on mouseout */ $Btn.on("click", function () { $(this).removeClass('hover'); // remove the hover class when button is clicked $('.move').toggleClass('angle'); }); });

 .move { border:1px solid #000000; padding: 10px; transition: transform .2s ease; /* have noticed issue is in "transition" */ } .button.hover { color: red; } .angle { transform: translate(100px, 0); }