jQuery class adding and removing with click and mouseleave
<p>I just want to control a div by toggling a class on click, as well as removing it when the mouse leaves the div. </p>

<p>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. </p>

<p>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.</p>

<p>Here is the site: <a href="http://danixd.com/test/" rel="nofollow">http://danixd.com/test/</a></p>

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

<p>jQuery</p>

<pre><code>$(function(){
            $('.main').click(function() { 
                $(this).toggleClass('activated');
            });
        });



$(function(){
            $('.main').mouseleave(function() { 
                $(this).removeClass('activated');
            });
        });
</code></pre>
