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

...如果您在点击之前将鼠标悬停，请删除该类并取消绑定点击 - 如果您在停留前单击，请取消绑定鼠标，并且该类永远不会被删除。

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

有人能指出为什么会失败，并可能建议一个更好的方法吗？谢谢！

Answer 1

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

.active_hover,
.active_click { ... }

然后绑定hover / unhover事件以添加/删除“active_hover”类，并单击click事件以添加“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设置的内联样式。如果单击它。它上面设置了一个硬类，所以它不会互相干扰。

jquery：在mouseover / mouseout元素上切换类，但是如果在元素内部单击则保持类？

2 个答案: