Versteckte HTML-Schaltflächen: Schaltflächen mithilfe von CSS ein- und ausblenden

In der Webentwicklung ist das Ausblenden von Schaltflächen eine sehr häufige Anforderung. Manchmal müssen wir einige Aktionselemente ausblenden und bei Bedarf anzeigen, anstatt ständig Platz auf der Seite zu belegen. In diesem Fall können wir CSS verwenden, um die Schaltfläche auszublenden und anzuzeigen. Nr. # 🎜🎜#Verwenden Sie CSS, um den Stil und die Attribute der Schaltfläche festzulegen

<button class="hide-btn">隐藏按钮</button>

Der obige CSS-Code legt die Position der Schaltfläche außerhalb der Seite fest und legt außerdem die Breite, Höhe, Transparenz und Mauszeigerstil. Diese Eigenschaften machen die Schaltfläche auf der Seite unsichtbar, aber dennoch anklickbar.

1. Erstellen Sie einen Controller, der eine Schaltfläche anzeigt.

.hide-btn {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  cursor: pointer;
}

2. Diese Schaltfläche kann vom Benutzer angeklickt werden. Wenn der Benutzer darauf klickt, wird die Schaltfläche „Ausblenden“ angezeigt. wird ausgelöst“ Beschriftungsanzeige.

Legen Sie den Stil und das Verhalten des Controllers fest

<button class="show-btn">显示按钮</button>

.show-btn {
  cursor: pointer;
}

3. Hier fügen wir ein Klickereignis zur Controller-Schaltfläche hinzu, wenn der Benutzer darauf klickt. Stellen Sie die Position der Beschriftung „Versteckte Schaltfläche“ auf „Statisch“ ein, damit sie auf der Seite angezeigt wird.

Animationseffekte hinzufügen (optional)

4. Wenn Sie das Erscheinen und Verschwinden dieser Schaltfläche reibungsloser gestalten möchten, können wir CSS-Animationseffekte verwenden . Wenn der Benutzer beispielsweise auf die Schaltfläche „Anzeigen“ klickt, wird die Beschriftung „Schaltfläche ausblenden“ eingeblendet angezeigt:

var hideBtn = document.querySelector('.hide-btn');
var showBtn = document.querySelector('.show-btn');

showBtn.addEventListener('click', function() {
  hideBtn.style.position = 'static';
});

.hide-btn {
  ...
  transition: opacity 1s;
}

.hide-btn.visible {
  opacity: 1;
}

Hier verwenden wir das CSS-Übergangsattribut, um den Deckkraftwert festzulegen Wertübergangseffekt. Gleichzeitig haben wir auch eine .visible-Klasse erstellt. Wenn der Benutzer auf die Schaltfläche „Anzeigen“ klickt, fügen wir sie der Beschriftung „Schaltfläche ausblenden“ hinzu, die den Übergangseffekt in CSS auslöst.

Zusammenfassung

5. Es ist sehr einfach, CSS zum Ein- und Ausblenden von Schaltflächen zu verwenden. Wir müssen lediglich die Position der Beschriftung „versteckte Schaltfläche“ außerhalb der Seite festlegen und dann ihre Position mit einem Controller ändern oder CSS-Animationseffekte verwenden, um sie reibungsloser erscheinen und verschwinden zu lassen. Diese Methode ist nicht nur bequem und praktisch, sondern hat auch keinen Einfluss auf die Leistung und Ladegeschwindigkeit der Seite.

Das obige ist der detaillierte Inhalt vonVersteckte HTML-Schaltflächen: Schaltflächen mithilfe von CSS ein- und ausblenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!