Flickering mousenter mouseleave with delay, button list

Flickering mousenter mouseleave with delay, button list

 have made a list( <p>) 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).

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.

Here is a fiddle to it: http://jsfiddle.net/Pota/Fj6E6/

Here is my JavaScript code

  1. $(function () { 
  2.  $("p.pRespRoleId").mouseenter(function () { 
  3.             var timeOut = 1200; 
  4.             $this = $(this); 
  5.             $this.data("delay", setTimeout(function () { 
  6.                   mouseInRespRoleId(); 
  7.             }, timeOut) ); 
  8.       }) .mouseleave(function () { 
  9.             $this = $(this); 
  10.             if ($this.next(mouseOutRespRoleId()).is(":visible")) { 
  11.                   clearTimeout($this.data("delay")); 
  12.                   mouseOutRespRoleId(); 
  13.             } else { 
  14.                   $this.next("p.pRespRoleId").show(); 
  15.             } 
  16.       }); 
  17.  });

and

  1. function mouseInRespRole() { 
  2.       var txtInRespRole = document.getElementById("<%=txtRespRoleName.ClientID %>"); 
  3.       txtInRespRole.style.background = "#FFFF00"; 
  4.       if (document.getElementById('txtRespRoleName').value == '') { 
  5.             document.getElementById('txtRespRoleName').innerHTML = txtInRespRole; 
  6.             return false; 
  7.       } 
  8. } 
  9. function mouseOutRespRole() { 
  10.       var txtOutRespRole = document.getElementById("<%=txtRespRoleName.ClientID %>"); 
  11.       txtOutRespRole.style.background = "white"; 
  12.       if (document.getElementById('txtRespRoleName').value == '') { 
  13.             document.getElementById('txtRespRoleName').innerHTML = txtOutRespRole; 
  14.             return true; 
  15.       } 
  16. }