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

如果我理解正确，你想将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();
});

Answer 2

尝试这样的事情：

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

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

2 个答案: