0

怀疑我想在这个方面太聪明了！

我正在开发一个 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 并且该类永远不会被删除。

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

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

4

2 回答 2

1

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

.active_hover,
.active_click { ... }

然后绑定hover/unhover事件添加/删除“active_hover”类，点击事件添加“active_click”类。

于 2009-11-23T20:24:58.607 回答
0

你可以这样做

$(".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 设置的内联样式。如果您单击它。上面设置了一个硬类，因此它不会相互干扰。

于 2014-08-25T09:32:33.057 回答