Un bouton de survol d'une publication commence à clignoter?

Question

J'ai deux éléments-div où un représentant un message (message d'état) et un représentant un bouton de suppression pour la suppression de la publication. Le bouton de suppression ne doit être affiché que lors de l'événement mouseover de l'élément div représentant la publication. Il doit également être affiché sur l'événement mouseover du bouton de suppression lui-même, car il se trouve dans le poste.

document.getElementById('statusPost').addEventListener('mouseover', function(event){ 
    var deleteButton = document.createElement('div'); 
    deleteButton.id = 'deleteButton'; 
    deleteButton.className = 'deleteButton'; 
    this.appendChild(deleteButton); 
},false); 

document.getElementById('statusPost').addEventListener('mouseout', function(event){ 
    this.removeChild(deleteButton); 
},false); 

Maintenant le problème est que sur le mouseover dans le bouton de suppression, le bouton de suppression commence à clignoter? Le bouton de suppression se trouve dans le message, comme Facebook. C'est comme sur mouseover sur le bouton delete est traité comme mouseout de l'élément div représentant le message. C'est pourquoi ça commence à clignoter. C'est du moins ce que je pense. Comment puis-je résoudre ce problème en cas de passage de la souris sur le bouton de suppression, qui se trouve dans le message, il cesse de clignoter?

Answer 1

Avez-vous réellement besoin de supprimer le bouton de suppression du DOM ou est-ce que vous pouvez le masquer? Si vous le pouvez, il est toujours préférable d'utiliser une approche CSS seulement:

.deleteButton 
{ 
    display: none; 
} 
.statusPost:hover .deleteButton 
{ 
    display: block; 
}