JavaScript中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=&#39;pop&#39;><a href=&#39;#&#39; class=&#39;Micro_video_a font_e&#39;>橡皮雕刻章子-周杰伦</a><div class=&#39;taolun&#39;>"+
    "<s class=&#39;taolun_icon icons&#39;></s>53</div><div class=&#39;like&#39;><s class=&#39;like_icon icons&#39;></s>230</div></div>";

        $(this).append(pop);

});

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

造成閃爍的原因：滑鼠移動到pop上觸發了mouseover事件，移除了pop後，又觸發了mouseout事件，實際上是兩個事件的交替執行，導致頁面不停渲染造成的。
解決方案：經過元素以及它的子元素都會觸發mouseover事件，將mouseover/mouseout事件換成mouseenter/mouseleave。

換成mouseenter試試

display: none 只是說隱藏嗎？位置也讓開 remove 不是節點移除嗎？

display:none->把這個人藏到屋子裡，別出來見人
$('#dom').remove()->把這個人徹底讓他從地球上消失
visibility:hidden->很多人吃空餉，占到茅坑不拉shi
opacity:0->穿上了皇帝的新衣

以上是JavaScript中css的display：none與remove在使用時的差別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！