Wie kann ich Listenelemente halbtransparent machen, mit Ausnahme des Elements, über das ich schwebe?

Erzielen einer teilweisen Deckkraft für Elemente mit Ausnahme des schwebenden Elements

Ziel dieser Untersuchung ist es, die Möglichkeit zu untersuchen, die Deckkraft von Elementen selektiv zu verringern , insbesondere Elemente auflisten (li), während das aktuell schwebende Element ausgenommen wird. Dieser Effekt emuliert einen visuellen Hinweis, der das schwebende Element hervorhebt.

Verwendung einer CSS-Lösung

Um dieses Verhalten zu erreichen, verwenden wir Cascading Style Sheets (CSS). Regeln:

ul:hover li { opacity: 0.5; }
ul li:hover { opacity: 1; }

Erläuterung

• Die erste Regel setzt die Deckkraft aller Listenelemente innerhalb eines schwebenden übergeordneten Listenelements (ul) auf 0,5 sie halbtransparent.
• Die zweite Regel überschreibt die vorherige Regel für das schwebende Listenelement und stellt dessen Deckkraft wieder her auf 1, wodurch es effektiv undurchsichtig wird.

Implementierung

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

li {
  float: left;
  width: 33.33%;
  line-height: 50px;
  background: grey;
  list-style-type: none;
}
ul:hover li {
  opacity: 0.5;
}
ul li:hover {
  opacity: 1;
}

Diese Demonstration veranschaulicht den gewünschten Effekt, wobei alle Listenelemente außer dem aktuellen Wenn man den Mauszeiger über das übergeordnete Listenelement bewegt, erscheint es halbtransparent. Das schwebende Objekt bleibt vollständig undurchsichtig und betont seine Präsenz.

Das obige ist der detaillierte Inhalt vonWie kann ich Listenelemente halbtransparent machen, mit Ausnahme des Elements, über das ich schwebe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!