jquery：在元素的鼠标悬停/鼠标移出时切换类，但如果单击元素内部则保留类？

Question

我怀疑我在这件事上太聪明了！

我正在开发一个 jQuery 插件函数，当您将鼠标悬停在元素上/移出时，该函数将在元素上打开/关闭类，但如果您在悬停之前单击元素内部，则不会删除该类，并且如果元素在悬停之前已经具有该类。

我尝试提出以下

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

想法： ...如果您在单击之前将鼠标悬停在外面，则删除该类并取消绑定单击 - 如果您在悬停之前单击，则取消绑定 mouseout 并且该类永远不会获得已删除。

显然（因为我在这里寻求帮助！）它不起作用 - 无论我在悬停之前是否在元素内部单击，该类都会被删除。

有人能指出它失败的原因，并可能提出更好的解决方法吗？谢谢！

Answer 1

如果通过 CSS 更改元素的外观是您的目标，一个简单的解决方案是添加另一个具有不同名称的选择器。

.active_hover,
.active_click { ... }

然后绑定悬停/取消悬停事件以添加/删除“active_hover”类，并绑定单击事件以添加“active_click”类。

Answer 2

你可以这样做，

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

所以当你悬停时，会设置一个内联CSS，如果你将鼠标悬停在div之外，jquery设置的内联样式将被删除..如果你点击它。其上设置了硬等级，因此不会相互干扰。