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

Question

I have a little problems with mouseover and mouseout

I want to use mouseover when the user put his mouse in the image (id = calendrieragenda), but mouseout only when he leave the parent div (id = divagenda), but it's don't work, when the user leave his mouse from the image, it's activate the function mouseout

 var divagenda = document.getElementById('divagenda'); var calendrieragenda = document.getElementById('imageagenda'); calendrieragenda.addEventListener('mouseover', function() { document.getElementById('divagenda').className = 'popUpAgendaMouseOver'; }); divagenda.addEventListener('mouseout', function() { document.getElementById('divagenda').className = 'popUpAgendaMouseOut'; }); 

 #divagenda { margin-top: 1em; } #imageagenda { width: 8%; position: relative; right: 6%; margin-top: 1em; margin-bottom: 1em; transition-duration: 0.5s; transform: translateX(-50%); left: 50%; z-index: 600; } .popUpAgendaMouseOver { border-radius : 1em; border : 1px rgba(250, 250, 250, .8) solid; background-color: #444444; transition: 1s; } .popUpAgendaMouseOut { border : none; background-color:none; transition: 1s; } 

 <div id="divagenda"> <a href="link" title="Lien vers l'Agenda" target="_blank"> <img id="imageagenda" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSf_HZLgiKNGwWv6V9Urtv3P2Sfo_Liw2dwOnq_oXg6-WInr_s" /> </a> </div> 

I do a jsfiddle to show you my code : https://jsfiddle.net/v7pkhymm/7/

Thank you very much and have a nice day !

Answer 1

The problem you're having is that your event is bubbling from the img up so the div will also receive that event.

There are a couple way to prevent this. You could add an event listener at the calendrieragenda level to stopPropagation:

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

Or you could check on the divagenda event listener that the target of the event is really the div:

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

});

I would prefer the second method as it does not create an unnecessary event listener.

Answer 2

A better approach is to use mouseleave to avoid the bubble.

Suggestions

• Use the classList collection to add and remove classes.
• Use the already found element divagenda to avoid repeated getElementById calls.

 var divagenda = document.getElementById('divagenda'); var calendrieragenda = document.getElementById('imageagenda'); calendrieragenda.addEventListener('mouseover', function() { divagenda.classList.add('popUpAgendaMouseOver'); }); divagenda.addEventListener('mouseleave', function() { this.classList.remove('popUpAgendaMouseOver'); this.classList.add('popUpAgendaMouseOut'); }); 

 #divagenda { margin-top: 1em; } #imageagenda { width: 8%; position: relative; right: 6%; margin-top: 1em; margin-bottom: 1em; transition-duration: 0.5s; transform: translateX(-50%); left: 50%; z-index: 600; } .popUpAgendaMouseOver { border-radius : 1em; border : 1px rgba(250, 250, 250, .8) solid; background-color: #444444; transition: 1s; } .popUpAgendaMouseOut { border : none; background-color:none; transition: 1s; } 

 <div id="divagenda"> <a href="link" title="Lien vers l'Agenda" target="_blank"> <img id="imageagenda" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSf_HZLgiKNGwWv6V9Urtv3P2Sfo_Liw2dwOnq_oXg6-WInr_s" /> </a> </div> 

Resource

• mouseleave