предотвращение события mouseout для дочернего узла

Question

У меня есть список изображений, я хочу показать некоторую информацию об этом изображении. И указатель мыши информационного div тоже исчезнет. Проблема в том, что когда мышь перемещается по дочернему тегу info div, она запускает даже mouseout, чего не должно быть. И я использую обычный JavaScript.

<div id="pop_div" onmouseout="clearinfo()" >
   <img alt="" src="" />
   <p>lines of text</p>
</div>


function clearinfo()
{
  document.getElementById("pop_div").style.dispaly = "none";
}

Answer 1

Вы можете эмулировать поведение события mouseleave:

<div id="pop_div" onmouseout="if ((event.relatedTarget || event.toElement) == this.parentNode) clearinfo()" >
   <img alt="" src="" />
   <p>lines of text</p>
</div>

Answer 2

Это поведение при наведении мыши. Однако если вы используете jQuery, вы можете использовать события mouseenter / mouseleave.