2

mouseover使用 knockout.js ，我mouseout在包含<div>. 处理程序切换布尔可观察对象。在<div>a 中<p>，其可见性与这些布尔值绑定。即滚动<div>显示<p>。的内容<p>绑定到模型中的可观察对象。

我发现如果绑定的内容<p>包含一个内联元素 - 例如<em>- 滚动文本中的内容<em>会导致<p>闪烁。任何内联元素似乎都会发生同样的情况。如果<p>不绑定的内容，则不会发生此问题。

mouseenter我通过使用 JQuery和mouseleave事件为我的应用程序找到了一种解决方法。

在这个小提琴中演示了所有 3 个案例。

这是预期的行为、错误还是我的疏忽？是否有不依赖于 JQuery 事件的解决方法？

（问题已在 OS X 10.7.4 中的 Chrome 21.0、Safari 6.0 和 FF 10.0.2 以及 Windows 7 中的 Chrome 和 IE 中验证）

4

1 回答 1

1

这只是 和 之间的区别mouseleave，mouseout并且是预期的行为。本文对此进行了概述：http ://www.mkyong.com/jquery/different-between-mouseout-and-mouseleave-in-jquery/

如果我要这样做，我会用 css 来做。除非您需要真正了解某些内容或基于鼠标悬停执行高级操作/操作，否则您可以非常轻松地控制基本可见性（演示中不需要淘汰赛）：

http://jsfiddle.net/WLShQ/

HTML：

<div class="hoverbox">
    <p>Mouse over here...</p>
    <p class="extra">Then roll over <em>this red text</em></p>
    <p class="extra">It doesn't flicker!</p>
</div>

和CSS

div.hoverbox p.extra {
    display: none;
}

div.hoverbox:hover p.extra {
    display: block;
}
于 2012-08-25T04:21:44.990 回答