鼠标悬停在一个 span 元素上多次触发

mouseover fires multiple times over one span element

本文关键字：元素 span 一个 悬停 鼠标      更新时间：2023-09-26

这里有一个简单的jsFiddle：

  • http://jsfiddle.net/cEDj6/

我有一个span元素，我mouseover绑定到。当我在不同的文本行上水平移动鼠标时，mouseover只发生一次。但是，当我在同一 span 元素内的文本行之间移动时，mouseover会发生多次。

  • 这是意料之中的吗？
  • 是否有一种标准方法来防止这种情况（不添加逻辑来考虑上次访问的元素）？
使用 Chromium，版本 28.0.1500.71 Ubuntu 13.04

（28.0.1500.71-0ubuntu1.13.04.1）。

这

似乎源于具有多行文本的内联<span>。实际上，就鼠标而言，每行之间的空间不包含在元素中。

这可以通过在元素上添加背景颜色来看到。将其更改为使用 display:block 的 css 中的 block elemnt 可以缓解问题，或者通过使用 span 以外的其他本机块元素

后台演示

如果你把它变成一个div而不是一个范围，它会按预期工作

这是

span的奇怪用法。由于语义元素是<p>标签，请使用它。这也将纠正您的问题。

有趣的是，这是因为跨度是一个内联元素并且它是包装的。由于跨度是内联项，并且它是换行的，因此您将获得单独的行，并且行之间有空格。我以前从未注意到这一点，但是，因为你有一个鼠标退出事件，它使它更加明显。要演示这一点，请查看您的小提琴上的此更新。

小提琴：http://jsfiddle.net/LSRvn/

The reason a DIV doesn't do this is because the DIV is a block element containing the items.
相关文章：