<a href> 内的子级触发鼠标移出。如何防止这种情况？答案

【问题标题】：Children inside <a href> trigger mouseout. How to prevent that?<a href> 内的子级触发鼠标移出。如何防止这种情况？
【发布时间】：2011-01-30 10:14:21
【问题描述】：

我有这个：

<a href="javascript:void(0);">
   <div>
      <span>some content</span>
      <span>some content</span>
   </div>
</a>

问题是将鼠标从一个悬停到另一个会触发即时 mouseout 和 mouseover，即使它们之间没有填充或边距。即使在浏览器的状态栏上，链接也会瞬间闪烁。如何预防？

【问题讨论】：

a {display:block;} 可能会这样做，因为内联元素中有 div。
@easwee 我有一个 display:block;已经，不起作用，当从一个跨度移动到另一个跨度时，链接仍然在状态栏中闪烁。
查看我的答案以获取示例代码

标签： html css triggers mouseout

【解决方案1】：

对于任何将这篇文章作为存档的人来说，这对我有用。

不要使用 mouseout() 尝试使用 mouseleave() 作为标签。

我的问题是 div 内的元素触发多个 mouseout 调用的结果。父对象上的鼠标离开解决了这个问题。

【讨论】：

【解决方案2】：

如果你使用 jQuery，你应该切换到hover 方法。

否则，请检查e.target || e.srcElement。

【讨论】：

hover() 有效，我将第一个参数 (hover-in) 留空，只使用第二个参数 (hover-out)。 mouseout() 事件仍会触发多次。状态栏仍然闪烁链接。

【解决方案3】：

不要将块元素包裹在锚标记中。锚标签是内联元素。如果您尝试将它们用作 URL 哈希的命名位置（即，用于内部页面导航），只需将它们放在页面必须滚动到的内容上方。

如果您试图在单击 div 时发生某些事情，请在 div 上放置一个 onclick 处理程序。

【讨论】：

除非他使用 html5 文档类型，否则允许在 a 内嵌套块级元素。虽然我只能合法地看到形成link 而不是页面内导航的锚。
这根本没有解决问题，它假设他使用的是旧的文档类型而不是 HTML5。
@brentonsrine：你没看到这篇文章的日期快三年了吗？当时 HTML5 的前景远没有现在那么确定，支持也非常稀少。 XHTML 是许多人选择的标记，而且要严格得多。您的评论和否决票假定每个组织中的每个人都可以选择出售哪种 HTML 风格——他们没有。鉴于我的 druthers，我会使用 HTML5，但在某些情况下，我不得不使用客户端使用的内容。

【解决方案4】：

嗯，你确实有一个垂直间隙（我可以看到两个<span> 标记之间有一个换行符）。删除它。

还值得注意的是，您的 HTML 远非有效。像<a> 这样的内联元素不能包含像<div> 这样的块元素。

【讨论】：

好吧，这只是一个更复杂的 html 的简单示例。真正的代码没有间隙，行高为 0。问题是即使使用 div 而不是锚点和 jQuery mouseout 事件也会触发 mouseout。使用空的第一个函数（）（输入元素）和只使用第二个函数（）参数的悬停（）按预期工作（没有多个悬停事件）。但是，使用锚点仍然存在闪烁状态栏中的链接的问题。
嗯，将事件附加到 DOM 节点这一事实并不会导致闪烁。看到真实代码有什么变化吗？
查看我的答案以获取准确重现问题的示例。那里也有链接

【解决方案5】：

这里是重现问题的部分代码，您可以复制并粘贴它来测试它或see here for the same thing I uploaded for testing：

<html><head><style>
a {
float:left;
border:1px solid #b0b;
display:block;
}
.shpf,.shpe {
background:#b0b; float:left;
width:2px; height:2px;
padding:0; margin:0;
line-height:0;
}
.shpe {
background:#fff;
}
.shpbrk {
float:left; clear:both;
}
</style></head><body>
<a id="happy" href="javascript:void(0);"><div id="happy_button" class="button"><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpf"></span><span class="shpf"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span></div></a>
</body></html>

注意：即使使用允许锚点成为块元素，因为 ricebowl 指出结果是一样的。将鼠标悬停在锚点上会触发 mouseout 事件，并且还会使状态栏闪烁目标链接文本（至少在 Firefox 中，没有在其他地方测试过）。跨度是空的，这通常是错误的，但即使有也会发生同样的情况。在他们里面。

【讨论】：

【解决方案6】：

破解了我的解决方案。位置：相对于锚点和内部的虚拟 div，在宽度和高度上扩展 100% 绝对定位以准确覆盖锚点。悬停时不再闪烁链接，也不应该触发任何虚拟鼠标退出事件。这是代码和here is a link：

<html><head><style>
a {
float:left;
border:1px solid #b0b;
display:block;
position:relative;
}
.shpf,.shpe {
background:#b0b; float:left;
width:2px; height:2px;
padding:0; margin:0;
line-height:0;
}
.shpe {
background:#fff;
}
.shpbrk {
float:left; clear:both;
}
.dummy {
z-index:1;
position:absolute;
left:-1px; top:-1px; /* Fix for parent's border, isn't required for no border */
border:1px solid;
border-color:inherit;
background:transparent;
width:100%;
height:100%;
}
</style></head><body>
<a id="happy" href="javascript:void(0);"><div class="dummy"></div><div id="happy_button" class="button"><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpf"></span><span class="shpf"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span></div></a>
</body></html>

【讨论】：