Wie mache ich nicht schwebende Listenelemente mithilfe von CSS halbtransparent?

Deckkraft bei nicht schwebenden Elementen manipulieren

In Ihrem HTML-Markup können Sie die Deckkraft aller Listenelemente (LIs) außer dynamisch anpassen derjenige, der gerade schwebt. Diese Technik erzeugt einen Effekt, bei dem nicht schwebende Elemente subtil transparent werden, während das schwebende Element vollständig sichtbar bleibt.

Um dies zu erreichen, kann CSS genutzt werden:

ul:hover li {
  opacity: 0.5;
}

ul li:hover {
  opacity: 1;
}

In diesem Codeausschnitt:

• Die erste Zeile reduziert die Deckkraft aller LIs (außer dem schwebenden Element) auf 50 %, sodass sie angezeigt werden halbtransparent.
• Die zweite Zeile stellt sicher, dass der schwebende LI eine Deckkraft von 1 behält und somit undurchsichtig bleibt.

HTML-Beispiel:

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

CSS Stile:

ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

li {
  width: 100px;
  height: 100px;
  background-color: gray;
  margin-right: 10px;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

ul:hover li {
  opacity: 0.5;
}

ul li:hover {
  opacity: 1;
}

Ergebnis:

Wenn Sie mit der Maus über einen LI fahren, bleibt seine Deckkraft bei 1, während alle anderen LIs halbtransparent werden. transparent. Dies bietet einen visuellen Hinweis auf das aktuell aktive Element.

Das obige ist der detaillierte Inhalt vonWie mache ich nicht schwebende Listenelemente mithilfe von CSS halbtransparent?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!