Wie kann ich dafür sorgen, dass ein CSS-Hover-Status bestehen bleibt, nachdem sich die Maus wegbewegt?

Aufrechterhaltung des CSS-Hover-Status nach dem Hover

Im Webdesign ermöglicht der Hover-Status, dass sich Elemente auf einer Seite verändern, wenn ein Benutzer mit der Maus darüber fährt ihnen. In manchen Fällen ist es jedoch wünschenswert, dass der Hover-Status auch dann bestehen bleibt, wenn die Maus des Benutzers das Element verlässt.

Beachten Sie den folgenden Codeausschnitt:

#about {
  height: 25px;
  width: 84px;
  background-image: url('about.png');
  position: absolute;
  top: 200px;
  left: 0px;
}

#onabout {
  height: 200px;
  width: 940px;
  position: absolute;
  top: 60px;
  left: 0px;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 300;
  display: none;
}

#about:hover #onabout {
  display: block;
}

Dieser Code verwendet :hover Pseudoklasse zum Anzeigen eines Elements (#onabout), wenn die Maus über ein anderes Element (#about) fährt. Wenn der Benutzer jedoch die Maus von #about wegbewegt, verschwindet #onabout.

Damit der Hover-Status bestehen bleibt, bietet CSS mehrere Optionen. Ein Ansatz besteht darin, eine Übergangseigenschaft einzuführen:

#about {
  ...
  transition: 0.2s ease;
}

#about:hover #onabout {
  transition: 0.2s ease;
  opacity: 1;
}

Dieser Code fügt einen sanften Übergangseffekt hinzu, wenn Sie mit der Maus darüber fahren und sich von #about entfernen. Die opacity-Eigenschaft wird ebenfalls geändert, um sicherzustellen, dass #onabout sichtbar bleibt, nachdem die Maus #about verlässt.

Ein anderer Ansatz beinhaltet die Verwendung der :active-Pseudoklasse:

#about {
  ...
  cursor: pointer;
}

#about:hover #onabout {
  display: block;
}

#about:active #onabout {
  opacity: 1;
  transition: 0.2s ease;
}

Dieser Code fügt a hinzu Cursor, um anzuzeigen, dass #about anklickbar ist, und verwendet :active, um den Hover-Status beizubehalten, wenn auf das Element geklickt wird. Der Übergang gewährleistet ein nahtloses visuelles Erlebnis.

Für diejenigen, die eine erweiterte Lösung suchen, bietet CSS3 schließlich die Eigenschaft „animation-play-state“:

#onabout {
  display: block;
  animation-name: hover;
  animation-play-state: paused;
}

#about:hover #onabout {
  animation-play-state: running;
}

Dieser Code führt eine Animation mit ein @keyframes Hover-Deklaration und pausiert sie standardmäßig. Wenn der Benutzer mit der Maus über #about fährt, wird der Animation-Play-State auf „Running“ gesetzt, wodurch die Animation gestartet und der Hover-Status beibehalten wird, selbst nachdem die Maus das Element verlässt.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass ein CSS-Hover-Status bestehen bleibt, nachdem sich die Maus wegbewegt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!