Wie kann ich mithilfe von CSS alle Elemente außer dem, über das ich den Mauszeiger bewege, dimmen?

Reduzierung der Deckkraft für alle Elemente außer dem schwebenden Element

In CSS können Sie die Deckkraft von Elementen anpassen, um deren Transparenz zu steuern. Um den Effekt zu erzielen, dass die Deckkraft aller Elemente außer dem schwebenden Element verringert wird, führen Sie die folgenden Schritte aus:

• Stellen Sie eine niedrigere Deckkraft für alle Elemente ein. Beginnen Sie mit der Anwendung eines niedrigeren Deckkraftwerts auf alle Elemente innerhalb eines Zielcontainers mithilfe der Opazitätseigenschaft. Dadurch wird ihre Sichtbarkeit verringert, während das schwebende Element davon unberührt bleibt. Zum Beispiel:

ul:hover li {
  opacity: 0.5;
}

• Setzen Sie die Deckkraft für das schwebende Element zurück.Um das schwebende Element hervorzuheben, stellen Sie seine Deckkraft auf 1 zurück, was der Standardeinstellung ist Wert. Sie können dies wie folgt erreichen:

ul li:hover {
  opacity: 1;
}

Hinweis: Diese Regeln gelten für die li-Elemente innerhalb des ul-Containers, die den Hover-Effekt auslösen.

Beispiel:

Bedenken Sie Folgendes Code:

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

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

Wenn Sie den Mauszeiger über eines der Listenelemente bewegen (

), werden alle anderen Listenelemente auf 50 % Deckkraft ausgeblendet, während das schwebende Element die volle Sichtbarkeit behält.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS alle Elemente außer dem, über das ich den Mauszeiger bewege, dimmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!