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!