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

【问题标题】：problem with Flickering of text on mouse move?鼠标移动时文本闪烁的问题？
【发布时间】：2010-11-11 18:49:13
【问题描述】：

我有一些最初隐藏的 html sn-p

<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 上隐藏它；虽然当我将鼠标放在元素上时我看到文本闪烁，但之前有人遇到过同样的问题。

【问题讨论】：

您在mouseover 上显示它。如果是display:none，则不会为mouseover 触发任何事件..
如何将鼠标悬停在隐藏元素上？
抱歉不清楚。我将鼠标悬停在页面上的某个其他元素上时显示它，并在鼠标移出时再次隐藏它。
你也应该发布你的 jQuery 和 CSS。
请发布更多代码，您不能将鼠标悬停在 display:none; - 我需要更多的工作！

标签： jquery html css mouseevent

【解决方案1】：

由于event bubbling，额外的mouseover 和mouseout 事件会在您的外部元素上触发。

您应该绑定到 mouseenter 和 mouseleave 而不是 mouseover/mouseout 以防止这种情况发生：

mouseleave 事件不同于 mouseout 处理事件的方式冒泡。如果mouseout 用于这个例子，那么当鼠标指针移出 Inner 元素，处理程序将是触发。这通常是不可取的行为。 mouseleave 事件，在另一方面，只触发其鼠标离开时的处理程序它绑定到的元素，而不是后裔。所以在这个例子中，处理程序在鼠标被触发时离开 Outer 元素，但不是内部元素。

【讨论】：

【解决方案2】：

您可能应该使用mouseleave 而不是mouseout。你也可以使用hover():

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

【讨论】：