Flickering mousenter mouseleave with delay, button list
<p>I have made a list(<code>&lt;p&gt;</code>) with buttons. When I move my mouse over them it's a 1,2 sec delay before my textbox are marked with yellow to show where I can write. When I move my mouse away they turn normal(white).</p>

<p>My problem is when I quickly hover my mouse over the buttons back and forth a lot of the textboxes gets marked.
I had hoped the 1,2 sec delay would have worked then but it doesn't. But it works if I move my mouse slowly in and out of the button.</p>

<p>Here is a fiddle to it:  <a href="http://jsfiddle.net/Pota/Fj6E6/" rel="nofollow">http://jsfiddle.net/Pota/Fj6E6/</a></p>

<p>Here is my JavaScript code</p>

<pre><code>$(function () {
    $("p.pRespRoleId").mouseenter(function () {
        var timeOut = 1200;
        $this = $(this);
        $this.data("delay", setTimeout(function () {
            mouseInRespRoleId();
        }, timeOut)
             );
    })


.mouseleave(function () {
       $this = $(this);
       if ($this.next(mouseOutRespRoleId()).is(":visible")) {
           clearTimeout($this.data("delay"));
           mouseOutRespRoleId();
       }
       else {
           $this.next("p.pRespRoleId").show();
       }
   });

});
</code></pre>

<p>and</p>

<pre><code>function mouseInRespRole() 
            {
            var txtInRespRole = document.getElementById("&lt;%=txtRespRoleName.ClientID %&gt;");
                txtInRespRole.style.background = "#FFFF00";
                if (document.getElementById('txtRespRoleName').value == '') 
                {
                    document.getElementById('txtRespRoleName').innerHTML = txtInRespRole;
                    return false;
                }
            }


            function mouseOutRespRole() 
            {
            var txtOutRespRole = document.getElementById("&lt;%=txtRespRoleName.ClientID %&gt;");
                txtOutRespRole.style.background = "white";
                if (document.getElementById('txtRespRoleName').value == '') 
                {
                    document.getElementById('txtRespRoleName').innerHTML = txtOutRespRole;
                    return true;
                }
            }
</code></pre>
