A mouseover button in a post starts blinking?

Question

I have two div-elements where one representing a post(status post) and one representing a delete-button for deletion of the post. The delete-button shall only be shown on mouseover event of div-element representing the post. It shall also be shown on mouseover event of the delete-button itself, because it lies within the post.

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);  

Now the problem is that on mouseover in the delete-button, the delete button starts blinking? The delete-button lies within the post, like facebook. It is like on mouseover on the delete-button is treated as mouseout of the div-element representing the post. So that's why it starts blinking. That's at least what I think. How do I solve this so in the event of mouseover on the delete-button, which lies within the post, it stops blinkng?

Answer 1

Do you need to actually remove the delete button from the DOM or is it ok to just hide it? If you can, it's always best to use a CSS only approach:

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