Heim > Web-Frontend > CSS-Tutorial > Wie kann ich Listenelemente halbtransparent machen, mit Ausnahme des Elements, über das ich schwebe?

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

DDD
Freigeben: 2024-12-16 03:04:17
Original
839 Leute haben es durchsucht

How Can I Make List Items Semi-Transparent Except for the One Hovered Over?

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; }
Nach dem Login kopieren

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>
Nach dem Login kopieren
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;
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage