开发者社区> 问答> 正文

js中css(display:none)和remove在实际使用时的不同?

杨冬芳 2016-06-01 18:14:18 1192

screenshot
写一个鼠标悬停显示,离开消失的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();
});
分享到
取消 提交回答
全部回答(3)
  • jenny.li
    2019-07-17 19:23:38
    display: none;是有占位的,div还在DOM tree里面; 而remove,是直接删除掉这个Dom元素。如果之后还有显示出来的操作,最好使用display:none 减少dom操作;如果是删除数据,特别是和server端进行数据交互的,就要使用remove了。
    0 0
  • 1657314997381774
    2019-07-17 19:23:38
    js的remove会删除元素,css中的display不会删除元素
    0 0
  • 杨冬芳
    2019-07-17 19:23:37

    闪烁的原因:鼠标移动到pop上触发了mouseover事件,移除了pop后,又触发了mouseout事件,实际上是两个事件的交替执行,导致页面不停渲染造成的。
    解决方案:经过元素以及它的子元素都会触发mouseover事件,将mouseover/mouseout事件换成mouseenter/mouseleave

    0 0
添加回答

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程