mouseover在一个span元素上多次触发

Question

这是一个简单的jsFiddle：

• http://jsfiddle.net/cEDj6/

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

• 这是预期的吗？
• 是否有一种标准方法可以防止这种情况（缺少添加逻辑来考虑最后访问过的元素）？

使用Chromium，版本28.0.1500.71 Ubuntu 13.04（28.0.1500.71-0ubuntu1.13.04.1）。

Answer 1

如果你使它成为div而不是span，它会按预期工作

Answer 2

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

Answer 3

有趣的是，这是因为跨度是一个内联元素，它正在包装。因为span是一个内联项，并且它是包装的，所以你得到单独的行，并且行之间有空格。我以前从未接受过这个，但是，因为你有一个mouseout事件，所以它更明显。要证明这一点，请查看您的小提琴上的此更新。

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

The reason a DIV doesn't do this is because the DIV is a block element containing the items. 

Answer 4

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

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

的 Background demo