js中css（display：none）和remove在实际使用时的不同？

写一个鼠标悬停显示，离开消失的js
鼠标悬停时在js中得到数据，使用.append（pop）粘贴到dom，显示在.Micro_video_imgne标签内。
鼠标移走时使用remove让pop消失。
但使用remove时有一个问题，当鼠标在pop上边悬停时，pop标签就会闪啊闪，因为增加的样式（.pop）在鼠标悬停标签（.Micro_video_img）内。
如果使用css（display：none）可以完美实现效果。但出个问题是会增加页面的标签。

$("body").on("mouseover",".Micro_video_img",function(){

    var pop="<div class='pop'><a href='#' class='Micro_video_a font_e'>橡皮雕刻章子-周杰伦</a><div class='taolun'>"+
    "<s class='taolun_icon icons'></s>53</div><div class='like'><s class='like_icon icons'></s>230</div></div>";

        $(this).append(pop);



});

$("body").on("mouseout",".Micro_video_img",function(){
    $(this).children("div.pop").remove();
});