Question

以下代码有效，但鼠标输入会导致闪烁

        $("#helptext").bind("mouseenter",function(){
            $("p:first",this).text("helptext.");
          }).bind("mouseleave",function(){
            $("p:first",this).text("");
          });

以下代码不起作用

        /*
        $("helptext").mouseout(function(){
            $("p:first",this).text("sdlfksdlfjskldjl");
          }).mouseover(function(){
            $("p:first",this).text("mouse over");
          });*/

我想删除闪烁或让第二个代码正常工作。

上面的HTML

<div id="helptext"><img  alt="Help Text" src="/static/help.png"></img><p></p></div>

Answer 1

这可能有点明显，但不是第一行中缺少＃的代码片段？似乎应该是：

$("#helptext").mouseout(function(){
    $("p:first",this).text("sdlfksdlfjskldjl");
}).mouseover(function(){
    $("p:first",this).text("mouse over");
});

Answer 2

我建议使用hover()而不是绑定到mouseenter，而mouseleave看起来更清晰。

$("#helptext").hover(function(){
    $("p:first",this).text("helptext text.");
  }, function(){
    $("p:first",this).text("");
  }
);

顺便说一下。我想如果没有更多的HTML / CSS代码，我认为我们无法解决这个问题，因为上面的内容根本不会闪烁。

点击此处http://jsbin.com/ihuna/

Answer 3

我认为这可能是您正在使用的JQuery版本中悬停的问题。当鼠标进入绑定元素的子节点时，我面临着多次调用悬停的问题。

请查看以下内容。

http://bugs.jquery.com/ticket/5821

mouseenter leave导致jQuery闪烁

3 个答案: