创建的 DIV 内的链接导致悬停时删除 div

Question

这是我的代码：

var tagDes = document.createElement('DIV');
                    tagDes.className = 'tagDes';
                    tagDes.style.cssText = 'position:absolute;'+
                                    'background:#282828;'+
                                    'color:#fff;'+
                                    'padding:10px;'+
                                    'top:'+(posX+hei)+'px;'+
                                    'left:'+(posY+wid)+'px;'+
                                    'font-size:10pt;';
                    tagDes.onmouseout = function(){
                                        $(this).remove();
                                    };
                    $('#main-container').append(tagDes);
                    $('.tagDes').append(array[5]+'<a class="tagMenu">sdsdssds</a>');

posX, posY, hei, wid 指的是一个定位元素。 array[5] 是一个字符串。 我想悬停li 并创建包含链接（tagMenu 类）的 div（看起来像title 属性）。但是当我将链接悬停在该 div 内时，该 div 将remove()。我要寻找的是，当我将链接悬停时，div 仍然可见，并且当我从中 mouseout 时它将从页面中删除。有什么建议吗？请帮帮我。

Answer 1

试试这样的：

 tagDes.onmouseout = function(e){
 if (e.toElement.parentNode == this || e.toElement == this) {
       return;
     }
   $(this).remove();
   };

Answer 2

如果我理解正确，您想将onmouseout 事件绑定到内部链接元素。那么代码可以是这样的（我使用了更多的jQuery来简化它）：

var $tagDes = $('<div class="tagDes"></div>').css({
    background: '#282828',
    color: '#fff',
    padding: '10px',
    top: (posX + hei) + 'px',
    left: (posY + wid) + 'px',
    fontSize: '10pt'
})
.append(array[5] + '<a class="tagMenu">sdsdssds</a>')
.appendTo('#main-container');

$tagDes.on('mouseleave', function() {
    $tagDes.remove();
});