Wie kann man die Deckkraft schwebender Elemente beibehalten und gleichzeitig die Deckkraft anderer Elemente in CSS reduzieren?

Variable Deckkraft für Elemente außer schwebenden Elementen erreichen

Sie haben eine Sammlung von Elementen, z. B.

Tags, und Sie möchten die Deckkraft aller Tags verringern, wenn der Mauszeiger über das übergeordnete Element bewegt wird. Sie möchten jedoch, dass die Deckkraft für das direkt schwebende Element unverändert bleibt.

Dies kann mithilfe von CSS erreicht werden. Indem Sie Hover-Stile auf das übergeordnete Element anwenden und sie für das schwebende Element zurücksetzen, können Sie den gewünschten Effekt erzielen:

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

Diese Technik funktioniert wie folgt:

• Wenn das übergeordnete Element
  Element befindet sich im Schwebezustand, alle
  • Die Deckkraft der darin enthaltenen Elemente wird auf 0,5 reduziert.
  • Wenn Sie mit der Maus über ein bestimmtes
  • Element, der Hover-Stil für das
    wird angewendet, wodurch die Deckkraft auf 0,5 reduziert wird. Allerdings ist der Hover-Stil für das schwebende
    • setzt die Deckkraft wieder auf 1 zurück.

    Dies führt zum gewünschten Effekt, bei dem alle

  • Die Deckkraft von Elementen mit Ausnahme des schwebenden Elements wird verringert, während das schwebende Element davon nicht betroffen ist.

    Beispiel

    Hier ist ein einfaches HTML- und CSS-Beispiel, um diese Technik zu demonstrieren:

    <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;
    }

    Hinweis: Mit dieser Technik lässt sich das erreichen Verschiedene Deckkrafteffekte auf verschiedenen Elementen basierend auf Hover-Interaktionen oder anderen Ereignissen.

    Das obige ist der detaillierte Inhalt vonWie kann man die Deckkraft schwebender Elemente beibehalten und gleichzeitig die Deckkraft anderer Elemente in CSS reduzieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!