how to hover only parent li not children on mouseover?
<p>I make a simple example in which I added hover class on mouseover event.But the class is also added on children .I want hover class only add on parent Example (<code>a</code>,<code>b</code>,<code>c</code>).But not on <code>ab</code> and <code>cd</code>.But When I hover on <code>a</code> or first element it added hover class on on <code>ab</code> and <code>cd</code>.I just want to add hover class on parent mean only on <code>a</code></p>

<p>here is my code
<a href="https://jsfiddle.net/qp6ex1jh/9/" rel="nofollow">https://jsfiddle.net/qp6ex1jh/9/</a></p>

<pre><code>$('#main-menu').on("mouseenter", "li", function() {
    $( this ).addClass( "hover" ); 
});
$('#main-menu').on("mouseleave", "li", function() {
    $( this ).removeClass( "hover" ); 
});
</code></pre>