Question

我有一个简单的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>

Answer 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是一种很好的辅助功能。

Answer 2

看看这个可以帮到你：A list apart's dropdown。

Answer 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>

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

3 个答案: