Javascript 在img上鼠标悬停，但在div上鼠标悬停

我对mouseover和mouseout有点问题

我想在用户将鼠标放在图像中时使用mouseover（id=calendrieragenda），但mouseout仅在用户离开父div（id=divagenda）时使用，但它不起作用，当用户从图像中离开鼠标时，它会激活mouseout函数

var divagenda=document.getElementById（'divagenda'）；
var calendriagenda=document.getElementById（'imageagenda'）；
Calendarragenda.addEventListener（'mouseover'，function（）{
document.getElementById（'divagenda'）。className='PopuPagendMouseOver'；
});
divagenda.addEventListener（'mouseout'，function（）{
document.getElementById（'divagenda'）。className='popuagendamouseout'；
});
#划分议程{
边缘顶部：1米；
}
#图像议程{
宽度：8%；
位置：相对位置；
右：6%；
边缘顶部：1米；
边缘底部：1米；
过渡时间：0.5s；
转化：translateX（-50%）；
左：50%；
z指数：600；
}
popUpAgendaMouseOver先生{
边界半径：1米；
边框：1个rgba（250250250.8）实心；
背景色：#4444；
过渡：1s；
}
popUpAgendaMouseOut{
边界：无；
背景色：无；
过渡：1s；
}
您遇到的问题是，您的事件正在从img向上冒泡，因此div也将接收该事件

有两种方法可以防止这种情况。您可以将日历级别的事件侦听器添加到StopRopagation：

calendrieragenda.addEventListener('mouseout', function(event) {
    event.stopPropagation();
});

或者，您可以在divagenda事件侦听器上检查事件的目标是否确实是div：

divagenda.addEventListener('mouseout', function(event) {
    if (event.target !== this) {
        return;
    }
    document.getElementById('divagenda').className = 'popUpAgendaMouseOut';

});

我更喜欢第二种方法，因为它不会创建不必要的事件侦听器。
更好的方法是使用
mouseleave
来避免冒泡

建议

使用
classList
集合添加和删除类
使用已经找到的元素
divagenda
避免重复调用
getElementById


var divagenda=document.getElementById（'divagenda'）；
var calendriagenda=document.getElementById（'imageagenda'）；
Calendarragenda.addEventListener（'mouseover'，function（）{
divagendamouseover.classList.add（'popUpAgendaMouseOver'）；
});
divagenda.addEventListener（'mouseleave'，function（）{
this.classList.remove（'popuagendamouseover'）；
this.classList.add（'popUpAgendaMouseOut'）；
});
#划分议程{
边缘顶部：1米；
}
#图像议程{
宽度：8%；
位置：相对位置；
右：6%；
边缘顶部：1米；
边缘底部：1米；
过渡时间：0.5s；
转化：translateX（-50%）；
左：50%；
z指数：600；
}
popUpAgendaMouseOver先生{
边界半径：1米；
边框：1个rgba（250250250.8）实心；
背景色：#4444；
过渡：1s；
}
popUpAgendaMouseOut{
边界：无；
背景色：无；
过渡：1s；
}

非常感谢！我使用第二种方法，它的工作！我想知道event.stopPropagation（）为什么不起作用。第二个很有用，但在这个链接中对你有用吗？它对我有用