Heim  >  Artikel  >  Web-Frontend  >  Was ist der Unterschied zwischen display:none und Remove in CSS in JavaScript?

Was ist der Unterschied zwischen display:none und Remove in CSS in JavaScript?

黄舟
黄舟Original
2017-07-24 09:48:002786Durchsuche

Schreiben Sie eine Mouseover-Anzeige und lassen Sie das verschwindende js.
Rufen Sie die Daten in js ab, wenn Sie mit der Maus darüber fahren, fügen Sie sie mit .append(pop) in den Dom ein und zeigen Sie sie im Tag .Micro_video_imgne an.
Verwenden Sie „Entfernen“, um das Pop verschwinden zu lassen, wenn die Maus bewegt wird.
Aber es gibt ein Problem bei der Verwendung von „Entfernen“. Wenn die Maus über „Pop“ fährt, blinkt das Pop-Label immer wieder, da sich der hinzugefügte Stil (.pop) innerhalb des Mauszeiger-Labels (.Micro_video_img) befindet.
Wenn Sie CSS verwenden (Anzeige: keine), kann der Effekt perfekt erzielt werden. Das Problem besteht jedoch darin, dass die Tags der Seite hinzugefügt werden.

$("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();
});

Die Ursache für das Flackern: Das Mouseover-Ereignis wurde ausgelöst, nachdem das Pop-Up entfernt wurde. Tatsächlich wurden die beiden Ereignisse abwechselnd ausgeführt, wodurch die Seite ausgelöst wurde zu stoppen, verursacht durch Rendern.
Lösung: Das Durchlaufen des Elements und seiner untergeordneten Elemente löst das Mouseover-Ereignis aus. Ersetzen Sie die Mouseover-/Mouseout-Ereignisse durch Mouseenter/Mouseleave.

Versuchen Sie, zur Mauseingabe zu wechseln

Anzeige: keine Bedeutet das nur versteckt? Die Position wird auch aus dem Weg geräumt. Ist die Knotenentfernung nicht möglich?

display:none->Verstecken Sie diese Person im Haus und kommen Sie nicht heraus, um jemanden zu sehen
$('#dom').remove()->Halten Sie diese Person vollständig von der Tür fern Antlitz der Erde verschwinden
Sichtbarkeit:hidden->Viele Menschen leben von leeren Löhnen und besetzen die Grube
Opazität:0->Tragen Sie die neuen Kleider des Kaisers

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen display:none und Remove in CSS in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn