Kann CSS allein ein Element formatieren, wenn man mit der Maus über ein anderes fährt?

Mit der Maus über ein Element fahren, um mit CSS ein anderes zu beeinflussen

Frage:

Erzielen eines CSS-Effekts durch Bewegen der Maus über ein Element Das Erscheinungsbild eines anderen Elements in der Nähe direkt zu verändern, kann schwierig sein. Trotz Versuchen, einen solchen Effekt zu implementieren, bleibt unklar, ob dies überhaupt nur durch CSS möglich ist.

Antwort:

Die Fähigkeit, das Erscheinungsbild eines Elements zu beeinflussen, wenn man mit der Maus über ein Element fährt Die Verwendung von CSS für verschiedene Elemente ist streng begrenzt. Tatsächlich ist dies nur möglich, wenn das Zielelement entweder ein Nachkomme oder ein benachbartes Geschwisterelement des Auslöseelements ist.

Absteigende Elemente:

Wenn das betroffene Element ist innerhalb des Triggerelements verschachtelt, CSS kann verwendet werden, um es beim Schweben zu manipulieren:

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

Dieser Selektor wendet den Effekt auf Elemente mit dem an folgende Struktur:

<div>
<p><strong>Benachbarte Geschwister:</strong></p>
<p>Für Elemente, die benachbarte Geschwister zum Triggerelement sind, ist ein anderer Ansatz erforderlich:</p>
<pre class="brush:php;toolbar:false">#first_sibling:hover + #second_sibling {
  opacity: 0.3;
}

Dieser Selektor zielt auf Elemente im folgenden HTML ab Struktur:

<div>
<p><strong>Einschränkungen:</strong></p>
<p>In beiden Fällen ist es wichtig zu beachten, dass das letzte im Selektor angegebene Element beim Schweben betroffen ist .</p>
<p><strong>Beispiel:</strong></p>
<p>Für ein Szenario ähnlich dem bereitgestellten Pseudocode-Beispiel könnte die folgende CSS-Regel verwendet werden:</p>
<pre class="brush:php;toolbar:false">img:hover + img {
  opacity: 0.3;
  color: red;
}

Ein Beispiel, das diesen Effekt demonstriert, finden Sie im bereitgestellten JS Fiddle: https://jsfiddle.net/