JavaScript中css的display：none与remove在使用时的区别？-js教程-PHP中文网

JavaScript中css的display：none与remove在使用时的区别？

黄舟

发布： 2017-07-24 09:48:00

原创

3123人浏览过

写一个鼠标悬停显示，离开消失的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 不是节点移除吗？

网趣购物系统多用户升级版

多用户升级版完美整合北京网银、NPS支付、云网支付、快钱支付、西部支付，同时完美整合支付宝功能，是目前国内多用户版最优秀的开店平台，新版同时整合Ewebedit编辑器，增加搜索引擎关键词设置等，！多用户升级版与上一版本有着本质的区别，程序无论在功能性、安全性以及用户使用习惯上有了更高的提升。多用户版除了具有普通网店的所有功能之外，同时允许其他用户在此平台上开设店铺，类似淘宝的功能，是目前电子商务领