0

我有一个“鼠标悬停”，甚至绑定到页面的所有元素。当鼠标悬停在一个元素上时，它会在最近的上方相关元素上绘制一个红色边框（以aardvark为例）。

我有以下代码：

<p>
<img height="333" width="250" title="Image par hyperbolic pants explosion sous licence CC - http://www.flickr.com/photos/74502564@N00/2716444681/" class="illustred" src="context-selector-test_files/rha_20090929_antivirus.jpg" />
Ah là là... ces abrutis qui continuent à refuser d'installer des antivirus parce que "
<em>
Je ne télécharge pas !
</em>
" ou "
<em>
Je ne vais que sur des sites de confiance.
</em>
</p>

你可以看到“img”在“P”里面。

预期的行为是，当我越过“P”时，它会出现边框，然后当我转到“IMG”时，边框会转到“IMG”。

它没有。

问题不是 CSS，因为我不使用 CSS，而是 4 个 div 来模拟元素周围“绝对”位置的 4 个边框。对于接下来的内容，这是强制性的。

当我越过“IMG”时出现问题，确实触发了“mouseover”，但是在“P”上再次触发了“mouse over”。我会理解“P -> IMG”，但“IMG -> P”让我很烦恼。为什么，一排有 2 个鼠标悬停？我没有移动鼠标。

现在，我错过了什么？

眼镜 ：

  • html 4;
  • CSS 2；
  • jQuery 1.3；
  • 火狐3.5；
  • Ubuntu 9.04；
  • 咖啡 1.50（升）。
4

3 回答 3

1

你被事件冒泡所吸引。

使用mouseenter()而不是mouseover。

于 2009-10-05T15:29:58.010 回答
1

在鼠标悬停处理程序中停止事件传播。

$('selector').mouseover( function(e) {
    ...
    e.stopPropagation();
});

您可能还想考虑使用hover()方法或hoverIntent()插件。后者将有助于减少任何闪烁，因为您只需在调用事件处理程序之前通过强制定时等待将鼠标拖过页面即可。

于 2009-10-05T15:32:39.617 回答
0

好吧，我想自杀，但这是答案。

我愚蠢地忘记了停止事件传播。您的回调函数，即“onmouseover”被触发时调用的函数，当然必须返回是否完成了它的工作。如果您不希望事件被冒泡，请返回“false”。

现在，在这个话题上花了 3 个小时后，请原谅我，我要上吊了。干杯。

PS：我将我所有的 SO 代表遗赠给社区 Wiki。

于 2009-10-05T15:39:30.283 回答