当前位置:Gxlcms > JavaScript > JavaScript中css的display:none与remove在使用时的区别?

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

时间:2021-07-01 10:21:17 帮助过:52人阅读

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

以上就是JavaScript中css的display:none与remove在使用时的区别?的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行