Rumah >hujung hadapan web >tutorial js >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='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(); });
造成闪烁的原因:鼠标移动到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!