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

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