Проблема JavaScript mouseover/mouseout с дочерним элементом

) У меня есть небольшая проблема, и я прошу для вашей помощи. У меня есть элемент div, внутри которого у меня есть элемент img, например

<div id="parent" onmouseover="MyFuncHover()" onmouseout="MyFuncOut()">
    <img id="child" src="button.png" style="visibility: hidden" />
</div>

<script type="text/javascript">
    function MyFuncHover() {
        // Here I have some code that makes the "child" visible
    }

    function MyFuncOut() {
        // Here I have some code that makes the "child" invisible again
    }
</script>

Как видите, изображение является дочерним элементом div. . Я хочу, чтобы только когда я покидаю divребенок исчезал. Тем не менее, похоже, что когда я навожу указатель мыши на изображение, вызывается функция MyFuncOut()(потому что, я полагаю, я покидаю div, наводя курсор на изображение). Я не хочу, чтобы это произошло. Я хочу, чтобы функция MyFuncOut()вызывалась только тогда, когда я покидаю область div.

Я не знал, что когда вы наводите указатель мыши на дочерний элемент управления, его родитель вызывает событие mouseout (даже если я нахожусь над дочерним элементом, я все еще нахожусь и над родителем). Я застрял в этом, и мне нужен ваш хороший совет. Спасибо!

ИЗМЕНЕНИЯ

ОК. Всплывание событий не будет отправлять событие «mouseout» родителю, когда я «mouseout» дочерний элемент. Он также не будет отправлять событие «наведение мыши» родителю, когда я «наведу курсор мыши» на дочерний элемент. Это не то, что мне нужно. Мне нужно, чтобы событие «mouseout» родителя не отправлялось, когда я «наводил курсор мыши» на ребенка. Возьми? Всплывающие события полезны, когда я не хочу, например, чтобы событие щелчка дочернего элемента передавалось родительскому, но это не мой случай.Что странно, так это то, что у меня есть другие элементы внутри одного и того же родителя, которые не запускают событие «mouseout» родителя, когда я «нахожу» их.