Rumah  >  Artikel  >  hujung hadapan web  >  JavaScript中css的display:none与remove在使用时的区别?

JavaScript中css的display:none与remove在使用时的区别?

黄舟
黄舟asal
2017-07-24 09:48:002785semak imbas

写一个鼠标悬停显示,离开消失的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->穿上了皇帝的新衣

Atas ialah kandungan terperinci JavaScript中css的display:none与remove在使用时的区别?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn