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

---

display: none 只是说隐藏吗？位置也让开
remove 不是节点移除吗？

---

换成mouseenter试试

---

三楼正解。

---

display:none->把这个人藏到屋子里，别出来见人
$('#dom').remove()->把这个人彻底让他从地球上消失
visibility:hidden->很多人吃空饷，占到茅坑不拉shi
opacity:0->穿上了皇帝的新衣

---

造成闪烁的原因：鼠标移动到pop上触发了mouseover事件，移除了pop后，又触发了mouseout事件，实际上是两个事件的交替执行，导致页面不停渲染造成的。
解决方案：经过元素以及它的子元素都会触发mouseover事件，将mouseover/mouseout事件换成mouseenter/mouseleave。