Wie kann ich mit CSS aktive Menüelemente hervorheben und gleichzeitig inaktive Menüelemente abblenden?

So markieren Sie aktive Menüelemente und dimmen nicht aktive Elemente

In diesem Codeausschnitt stoßen wir auf ein Szenario, in dem wir dimmen möchten die Deckkraft aller Menüelemente (

-Elemente), wenn der Mauszeiger über das übergeordnete Menü (

) bewegt wird. Der schwebende Menüpunkt selbst sollte jedoch die volle Deckkraft behalten.

CSS-Lösung

Um diesen Effekt zu erzielen, verwenden wir CSS, um die Deckkraft des Menüs dynamisch anzupassen Elemente:

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

Erklärung:

• Die erste Regel (ul:hover li) wendet eine Deckkraft von 0,5 auf alle
• Elemente, wenn ihre übergeordneten
  wird geschwebt. Dadurch werden die Menüelemente abgeblendet, über die sich der Mauszeiger gerade nicht befindet.
  • Die zweite Regel (ul li:hover) setzt die Deckkraft für das
  • -Element auf 1 zurück. Element, über das tatsächlich geschwebt wird. Dadurch wird sichergestellt, dass der aktuelle Menüpunkt vollständig sichtbar bleibt.

  Beispiel

  Bedenken Sie den folgenden HTML- und CSS-Code:

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  
  <style>
    li {
      float: left;
      width: 33.33%;
      line-height: 50px;
      background: gray;
      list-style-type: none;
    }
    ul:hover li {
      opacity: 0.5;
    }
    ul li:hover {
      opacity: 1;
    }
  </style>

  Wenn Sie mit der Maus über das

  Element, alle
  • Elemente mit Ausnahme des Elements, über das Sie den Mauszeiger bewegen, werden zu 50 % transparent, während das
  • Das Element behält seine volle Deckkraft. Dadurch entsteht ein subtiler Hervorhebungseffekt, der Benutzer zum aktiven Menüpunkt führt.

    Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS aktive Menüelemente hervorheben und gleichzeitig inaktive Menüelemente abblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!