縮小2個內聯元素之間的差距

Question

我有一個簡單的div元素，其中包含另一個包含2個內聯標簽的div元素。 我已經將onmouseout事件關聯到第一個div容器，並將onmouseover事件關聯到了第二個容器。

問題是，當用戶將鼠標懸停在div中的兩個標簽之間以及第二個標簽結束之后，會觸發onmouseout事件。

我想做的是允許用戶將鼠標懸停在整個div標簽上，並且僅當鼠標指針位於div元素之外時才觸發onmouseout事件（這是我從所做的工作中得出的假設）。

我增加了填充以縮小兩個標簽之間的距離。 這可行，但是至少在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>

不過，您還應該注意， 在links之間包含字符是一種很好的可訪問性做法。

Answer 2

看看這對您有何幫助： 列表清單 。

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>