Сокращение промежутка между 2 встроенными элементами

Question

У меня есть простой элемент div, который содержит еще один элемент div, который содержит 2 встроенных тега. Я связал событие onmouseout с первым контейнером div и событие onmouseover со вторым контейнером.

Проблема в том, что событие onmouseout возникает, когда пользователь наводит указатель мыши между двумя тегами в div, а также после окончания второго тега.

Что я хочу сделать, так это позволить пользователю навести указатель мыши на весь тег div и запустить событие onmouseout, только когда указатель мыши находится вне элемента div (что я и предполагал из того, что сделал ).

Я увеличил отступы, чтобы закрыть разрыв между двумя тегами. Это работает, но там, где они встречаются в 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>

Хотя вы также должны знать, что это хорошая практика доступности для включить символы между ссылками .

Answer 2

Посмотрите на это

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

Answer 3

Взгляните на это, чтобы помочь вам: Раскрывающийся список отдельно .