Link inside created DIV cause the div removed on hover

Question

Here is my code:

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 is reffering to an element for positioning. array[5] is a string. I want to hover for a li and create div that contain link(tagMenu class) inside(looks like title attribute). But when I hover the link inside that div, the div will remove(). What I looking for is when I hover the link the div still visible and it will removed from page when I mouseout from it. Any suggestion? Please help me.

Answer 1

try something like this:

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