Кнопка наведения мыши в посте начинает мигать?

Question

У меня есть два элемента div, где один представляет сообщение (статусное сообщение), а другой представляет кнопку удаления для удаления сообщения.Кнопка удаления должна отображаться только при наведении курсора на элемент div, представляющий сообщение.Он также должен отображаться при событии наведения мыши на самой кнопке удаления, поскольку он находится внутри сообщения.

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

Теперь проблема заключается в том, что при наведении курсора на кнопку удаления кнопка удаления начинает мигать?Кнопка удаления находится внутри поста, как Facebook.Это как при наведении курсора на кнопку удаления, которая рассматривается как указатель мыши на элемент div, представляющий сообщение.Вот почему он начинает мигать.По крайней мере, я так думаю.Как мне решить эту проблему, чтобы в случае наведения мыши на кнопку удаления, которая находится внутри сообщения, оно перестало мигать?

Answer 1

Вам действительно нужно удалить кнопку удаления из DOM или можно просто ее скрыть? Если вы можете, всегда лучше использовать только CSS-подход:

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