Kann CSS die Deckkraft eines Elements beeinflussen, wenn man mit der Maus über ein anderes Element fährt?

Können sich Elemente gegenseitig beeinflussen, wenn man mit der Maus über verschiedene Elemente fährt?

Problem:

Das Ziel ist es, die Deckkraft eines Elements (#thisElement) zu ändern, indem Sie den Mauszeiger über ein anderes (img) bewegen, ohne es zu verwenden JavaScript.

Gewünschte Funktionalität:

Wenn Sie mit der Maus über „img“ fahren, sollte die Deckkraft von „img“ auf 100 % steigen, während die Deckkraft von „#thisElement“ sollte auf 30 % sinken.

CSS Einschränkungen:

Leider kann CSS allein diesen Effekt nicht erzielen, da es nicht in der Lage ist, Stile auf ein Element anzuwenden, basierend auf dem Schweben eines anderen Elements.

Optionen für Beeinflussung benachbarter Elemente:

CSS kann jedoch den Stil von Elementen ändern, die sich auf das schwebende Element beziehen Element:

• Nachkommen: Wenden Sie Stile auf untergeordnete oder verschachtelte Elemente an. Beispiel:

  #parent_element:hover #child_element {
    opacity: 0.3;
  }

• Benachbarte Geschwister: Wirkt sich auf Elemente aus, die dem schwebenden Element unmittelbar folgen oder ihm vorausgehen. Beispiel:

  #first_sibling:hover + #second_sibling {
    opacity: 0.3;
  }

Vorgeschlagene Lösung:

Basierend auf der gegebenen HTML-Struktur, wobei „img“ unmittelbar darunter Geschwister ohne Verschachtelung hat , können Sie den angrenzenden Geschwisterselektor verwenden:

img:hover + img {
    opacity: 0.3;
    color: red;
}

Diese CSS-Regel passt die Deckkraft des an 'img'-Elemente neben dem schwebenden 'img'-Element.

Das obige ist der detaillierte Inhalt vonKann CSS die Deckkraft eines Elements beeinflussen, wenn man mit der Maus über ein anderes Element fährt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!