缩小 2 个内联元素之间的差距答案

【问题标题】：Closing the gap between 2 inline elements缩小 2 个内联元素之间的差距
【发布时间】：2010-04-23 17:02:56
【问题描述】：

我有一个简单的 div 元素，其中包含另一个包含 2 个内联标签的 div 元素。我已将 onmouseout 事件关联到第一个 div 容器，并将 onmouseover 事件关联到第二个容器。

问题在于，当用户将鼠标悬停在 div 中的两个标签之间以及第二个标签结束之后，就会触发 onmouseout 事件。

我想要做的是允许用户将鼠标悬停在整个 div 标签上，并且只在鼠标指针位于 div 元素之外时触发 onmouseout 事件（这是我从我所做的假设)。

我增加了填充以缩小 2 个标签之间的差距。这可行，但他们在 IE7 中相遇的地方至少触发了事件！！！

我一定是做错了什么，请有人帮忙。

        <div id="Div1" onmouseout="hideDiv1()" >
            <div id="Div2" onmouseover="showDiv2()">
                <a id="A1" href="#">a</a>
                <a id="A2" href="#">b</a>
                <a id="A3" href="#">c</a>
            </div>
        </div>

【问题讨论】：

这是dopdwon菜单吗？为什么不使用 CSS 和 uls 和 lis？
没有解决您的问题。你能详细解释一下吗
onmouseout, onmouseover -- 这是哪个？无论如何，我的第一个想法是周围的<div> 正在捕捉由<a> 触发的冒泡 onmouseout 事件，但我对这个问题有点困惑。
很抱歉，我忘了添加第一个 div，所以我修改了上面的代码 - 希望现在清楚了。基本上它看起来像这样用左右边框呈现：[|一个 | |乙| | C | ]。当我将鼠标悬停在 A 和 B 或 B 和 C 或 C 的边界和 div 的末尾之间时，会触发 onmouseout
这对于由触发的冒泡 onmouse 事件可能是有意义的。

标签： javascript html css

【解决方案1】：

“差距”是预期行为。这些是内联元素，它们之间有空格，所以浏览器正确地在它们之间呈现一个空格。如果你想缩小差距，最简单、最干净、最有效的语义方法就是真正缩小差距：

<div class="redBorder" id="Div1" onmouseover="showBorder(this)" onmouseout="doMouseout(event)">
    <a id="A1" href="HTMLNew.htm">ARTICLES</a><a id="A2" href="HTMLNew.htm">COURSES & CASES</a>
</div>

不过，您还应该知道，include characters between links 是一种良好的可访问性做法。

【讨论】：

我已经缩小了差距，但是在 IE7 和可能的 IE6 中，当我将鼠标悬停在边框附近时，它会触发 onmouseout 事件。缩小差距的最佳方法是什么？
当我说悬停在边框附近时，我的意思是悬停在边框的角落附近，所以右上角/左上角/左下角和右下角

【解决方案2】：

看看这个对你有帮助：A list apart's dropdown。

【讨论】：

我尝试使用 ul 和 li's 但内联元素之间存在间隙的问题完全相同。
如果您使用 CSS 下拉菜单，您可以使用边距和内边距来减少间隙。
我这样做了，但是在 IE7 和 IE6 中，当我将鼠标悬停在 2 或 3 像素左右的顶部边框上时，它会触发 onmouseevent。我对上面的代码做了一点修改，让事情变得更清楚了。
我理解您的问题，我是说有一些 CSS 规则可以比这更好地显示和隐藏 UL 菜单，而且您不会遇到任何奇怪的错误。 IE确实有bug，我给你的资源也有一个JS来对付IE的bug。

【解决方案3】：

看看这个

<style>
.redBorder { border:1px solid red}
.blackBorder { border:1px solid black}
</style>
<script>
function doMouseout(e) { // code modified from "PointedEars"
  if (!e) e = window.event; // IE
  var
  // W3C DOM Level 2+ Events
  relatedTarget = e.relatedTarget,
  currentTarget = e.currentTarget;

  // MSHTML DOM
  if (!(relatedTarget && currentTarget)) {
    relatedTarget = e.toElement;
    currentTarget = e.srcElement;
  }

  if (relatedTarget && currentTarget && currentTarget.tagName.toLowerCase()=="div")  {
    hideBorder(currentTarget);
  }
}
function hideBorder(el) {
  el.className="redBorder"
}
function showBorder(el) {
  el.className="blackBorder"
}

</script>

<div class="redBorder" id="Div1" onmouseover="showBorder(this)" onmouseout="doMouseout(event)">
        <a id="A1" href="HTMLNew.htm">ARTICLES</a>
        <a id="A2" href="HTMLNew.htm">COURSES & CASES</a>
    </div>
</div>

【讨论】：

嘘。一个人真的必须很快才能在这里边说话！
你没看错，好像也没有多少人经常回答:P