鼠标闪烁，鼠标左键延迟，按钮列表

我制作了一个带有按钮的列表(<p>)。当我将鼠标移到它们上面时，在文本框被标记为黄色以显示我可以写入的位置之前，会有1,2秒的延迟。当我把鼠标移开时，它们变成正常(白色)。

我的问题是，当我快速地将鼠标悬停在按钮上，来回很多文本框得到标记。我曾希望那1.2秒的延迟会起作用，但它没有。但是如果我把鼠标慢慢地移进移出按钮，它就会工作。

这里是一个小提琴:http://jsfiddle.net/Pota/Fj6E6/

这是我的JavaScript代码

$(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();
       }
   });
});

和

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

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