jQuery 类通过 click 和 mouseleave 添加和删除答案

【问题标题】：jQuery class adding and removing with click and mouseleavejQuery 类通过 click 和 mouseleave 添加和删除
【发布时间】：2010-04-29 20:40:07
【问题描述】：

我只想通过在单击时切换类来控制 div，以及在鼠标离开 div 时将其删除。

我让它与mouseout一起工作，但是当我进入一个子元素时，mouseOut触发了，所以我知道我需要使用mouseleave。我只是不确定如何合并告诉 jQuery 鼠标已进入。

更新：当我使用 mouseenter 和 mouseleave 时，似乎功能不起作用但是当我将它们换成 mouseover 和 mouseout 时，它们确实有效。

这里是网站：http://danixd.com/test/

它有很多，但这里是代码。我回顾了我正在使用的旧 jquery。

jQuery

$(function(){
            $('.main').click(function() { 
                $(this).toggleClass('activated');
            });
        });



$(function(){
            $('.main').mouseleave(function() { 
                $(this).removeClass('activated');
            });
        });

【问题讨论】：

你想让 mouseenter 添加类吗？
不，我只想点击鼠标来添加课程。
mouseclick 正在切换课程。如果您希望它添加类，请使用 .addClass
我要鼠标点击切换：激活类：点击div 取消激活类：点击div/鼠标移出div
好吧，粘贴您的代码后，当我单击 .main 部分之一（在垂直黑色区域中似乎是较小的子部分）时，会发生单击导致半出现透明框。然后，如果我单击或将鼠标移开，它就会消失。（请注意，我正在使用下面的解决方案中的 jQuery。）这听起来像您预期的行为吗？

标签： jquery

【解决方案1】：

如果我理解，您想在“点击”时添加类，并在“点击”或“鼠标离开”时删除类。

如果是这样，你可以这样做。

$('.main').click(function() { 
    var $ths = $(this);
    if($ths.hasClass('activated'))
        $ths.removeClass('activated');
    else
        $ths.addClass('activated');
}).mouseleave(function() { 
    $(this).removeClass('activated');
});

【讨论】：

这很好！ ;-) }).mouseleave 干得好！我从来不知道我们可以将它与 click 和 mouselieave 一起使用！ ;-) +1
他们真的没有在一起。它们是分配给.main 的两个独立事件，代表客户端的操作。和$('.main').click(func...和$('.main').mouseleave(func...一样
你的意思是他们不像 es: classic .mouseenter }).mouseleave ?
@aSeptik - 我不确定你的评论是什么意思。它们只是以 jQuery 方式链接。正如我在上面的评论中指出的那样，它们可以很容易地单独分配。但它们本质上并没有“在一起”。它们是两个独立的事件，就像 mouseenter 和 mouseleave 是两个独立的事件一样。您可以将处理程序分配给一个，或两者，或都不分配。

【解决方案2】：

我只是不确定如何合并告诉 jQuery 鼠标已经进入。

如果是这样，那么就不需要处理点击事件，据我了解：

$('.main').mouseenter(function() { 
    $(this).addClass('activated');
}).mouseleave(function() { 
    $(this).removeClass('activated');
});

【讨论】：

【解决方案3】：

我想这就是你要找的东西：

    $('.main').click(function() {
            if ($(this).attr("class").indexOf("activate") > -1) {
                $(this).removeClass("activate");
            } else {
                $(this).addClass("activate");
            }
    }).mouseleave(function() {
        $(this).removeClass("activate");
    });

【讨论】：