Почему срабатывает событие onmouseut, если я не навожу курсор на этот элемент?

Question

[Dvorak]

<div class='parent folders'>
  <img class='child_img' src=''>
  <div class='child'>
    <p class='listFileText'>wertyu</p>
  </div>
    <ul class="functions-menu">
    <li class="functions-menu-buttons" id="paste">Вставить</li>
    <li class="functions-menu-buttons" id="copy">Копировать</li>
    <li class="functions-menu-buttons" id="cut">Вырезать</li>
    <li class="functions-menu-buttons" id="delete">Удалить</li>
    <li class="functions-menu-buttons" id="rename">Переименовать</li>
    </ul>
</div>

Есть такая вёрстка. При наведении курсора на <div class="child"></div> после <p class='listFileText'>wertyu</p> добавляется <p class="download">Поделиться</p>. И всё хорошо, но почему-то при наведении на один из элементов класса functions-menu-button срабатывает событие onmouseout для элемента<div class="child"></div>. Как исправить?

То есть на скриншоте, например, я навёл курсор на "переименовать", а сработало событие и появилась кнопка "Поделиться". В чём проблема?

Answer 1

[Stalker_RED]

А где код? И вы уверены, что вам нужен onmouseout а не onmouseover? Из вашего объяснения это не очевидно.

но почему-то при наведении на один из элементов класса functions-menu-button срабатывает событие onmouseout для элемента .child

Но ведь оно и должно срабатывать! Ваши .functions-menu-button не находятся внутри .child
Чтобы навести на на них нужно увести мышь из .child, вот и срабатывает mouseout.
А даже если бы они были внутри, то все равно срабатывал бы. Разве что заменить на mouseleave.

Comments

[Dvorak]

у меня просто это всплывающее меню динамически создаётся. И список файлов тоже. Я не стал скидывать 200 строк кода