jQuery class adding and removing with click and mouseleave

Question

I just want to control a div by toggling a class on click, as well as removing it when the mouse leaves the div.

I had it working with mouseout, but when I entered over a child element, the mouseOut triggered, so I know I need to use mouseleave. I am just unsure how incorporate telling jQuery the mouse has entered.

UPDATE: It seems functions won't work when I use mouseenter and mouseleave BUT they do work when I swap them to mouseover and mouseout.

Here is the site: http://danixd.com/test/

It has a lot on, but here is the code. I referred back to the old jquery I was using.

jQuery

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



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

Answer 1

DEMO: http://jsbin.com/ipudo/9

try this:

you can trigger ( mouseleave ) event when another element is clicked:

$('.main').click(function(e) {
  e.preventDefault();
   $(this).addClass('activated');
  $('.main').mouseleave(function() {
 $(this).removeClass('activated');
 });
});

just for downvoters, the lines below are from jquery site:

$('#other').click(function() {
  $('#outer').mouseleave();
});

Answer 2

I am just unsure how incorporate telling jQuery the mouse has entered.

If that is the case, then there is no need to handle the click event, from what I understand:

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

Answer 3

I think this is what you're looking for:

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

Answer 4

If I understand, you want to add the class on 'click', and remove the class on 'click' OR 'mouseleave'.

If so, you could do something like this.

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