ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptのCSSでのdisplay:noneとremoveの違いは何ですか?

JavaScriptのCSSでのdisplay:noneとremoveの違いは何ですか?

黄舟
黄舟オリジナル
2017-07-24 09:48:002786ブラウズ

マウスホバー表示を書いて、消えたjsを残す
マウスホバーした時のデータをjsで取得し、.append(pop)でdomに貼り付け、.Micro_video_imgneタグ内に表示します。
マウスを動かしたときにポップを消すには、削除を使用します。
ただし、remove を使用するときに問題が発生します。追加されたスタイル (.pop) がマウス ホバー ラベル (.Micro_video_img) 内にあるため、マウスをポップの上に置くと、ポップ ラベルが点滅します。
CSS(表示:なし)を使えば完璧に効果が得られます。しかし問題は、ページのタグが追加されることです。

$("body").on("mouseover",".Micro_video_img",function(){
    var pop="<div class=&#39;pop&#39;><a href=&#39;#&#39; class=&#39;Micro_video_a font_e&#39;>橡皮雕刻章子-周杰伦</a><div class=&#39;taolun&#39;>"+
    "<s class=&#39;taolun_icon icons&#39;></s>53</div><div class=&#39;like&#39;><s class=&#39;like_icon icons&#39;></s>230</div></div>";

        $(this).append(pop);

});

$("body").on("mouseout",".Micro_video_img",function(){
    $(this).children("div.pop").remove();
});

ちらつきの原因: マウスがポップに移動すると、mouseout イベントがトリガーされ、実際には 2 つのイベントが交互に実行されることで発生します。ページをクリックしてレンダリングを続行します。
解決策: 要素とその子要素を通過すると、mouseover イベントがトリガーされ、mouseover/mouseout イベントをmouseenter/mouseleave に置き換えます。

mouseenter

display: none に変更してみてください。単に非表示という意味ですか?位置も邪魔にならない位置に移動してノードを削除するのではありませんか?

display:none->この人を家の中に隠し、誰にも会わないようにします
$('#dom').remove()->この人を地球上から完全に消します
visibility:hidden - >多くの人が空の賃金で生活し、トイレを占拠しています
不透明度:0->皇帝の新しい服を着ています

以上がJavaScriptのCSSでのdisplay:noneとremoveの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。