鼠标移动时文本闪烁的问题？

Question

我有一些最初隐藏的html片段

<p style="float: left; position: relative; left: 130px; top: 80px; display: none;" id="homehref">    
    <a href="" style="color: white;">Home Page</a>
</p>

我用jQuery.show（）显示它;在mouseover上再次使用jQuery.hide（）将其隐藏在mouseout上当我将鼠标放在元素上时，我发现文本闪烁时，任何人都面临同样的问题。

Answer 1

由于event bubbling，您的外部元素会触发其他mouseover和mouseout个事件。

您应该绑定到mouseenter和mouseleave而不是mouseover / mouseout，以防止：

  

mouseleave事件不同于   mouseout处理事件的方式   冒泡。如果使用了mouseout   这个例子，然后当鼠标   指针移出内部   元素，处理程序将是   触发。这通常是不合需要的   行为。 mouseleave事件发生了   另一方面，只触发它   当鼠标离开时的处理程序   它必然是一个元素，而不是一个   后裔。所以在这个例子中，   处理程序在鼠标时触发   离开外部元素，但不是   内部元素。

Answer 2

您应该使用mouseleave代替mouseout。您也可以使用hover()：

$('#someOtherElement').hover(function() {
    $('#homeref').toggle();
});