Unbind even when mouse over child
<p>I have the following HTML</p>

<pre><code>&lt;ul&gt;
&lt;li class="operation&gt;Lorem ... &lt;span rel="popover" data-content="Impsum"&gt;%&lt;/span&gt;&lt;/li&gt;
&lt;li class="operation&gt;Lorem ... &lt;span rel="popover" data-content="Impsum"&gt;%&lt;/span&gt;&lt;/li&gt;
&lt;li class="operation&gt;Lorem ... &lt;span rel="popover" data-content="Impsum"&gt;%&lt;/span&gt;&lt;/li&gt;
</code></pre>

<p></p>

<p>I'd like to fadeIn the span element when the mouse goes over the list item and fadeOut when the mouse moves away from the item. BUT IF the mouse goes over the span itself I'd like to keep it visible even after the mouse moves away.  I mede several attempts but every time the span disappears when the mouse is not over anymore.  Below you may find the last 2 attempts</p>

<pre><code>$(".operation").on("mouseenter", function(event){
$(this).children("span[rel=popover]").fadeIn(200);
}).on("mouseleave", function(event){
  $(this).children("span[rel=popover]").fadeOut(200);
});

$("span[rel=popover]").off("mouseleave", function(event){
    $(this).fadeOut(200);
});
</code></pre>

<p>and</p>

<pre><code>$(".operation").on("mouseenter", function(event){
 $(this).children("span[rel=popover]").fadeIn(200);
}).on("mouseleave", function(event){
  $(this).children("span[rel=popover]").fadeOut(200);
});

$("span[rel=popover]").hover(function(){
  $(this).off("mouseleave", function(event){
    $(this).fadeOut(200);
  });
});
</code></pre>

<p>Am I missing something? How can I fix it ?</p>

<p>Thanks and have a nice day.</p>
