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.

Yes I am new to this! Here is my code:

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



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