欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-30 09:37:33
...
写一个鼠标悬停显示,离开消失的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在使用时的区别?的详细内容,更多请关注其它相关文章!