wake-up-neo.net

Können Sie einen CSS-Hover-Effekt auf ein Element anwenden, das kein untergeordnetes Element des Hover-Elements ist?

Ich war mir nicht sicher, ob dies möglich ist oder nicht. Ich arbeite gerade in CSS3-Animationen und muss über einen Link fahren, der andere div-Elemente (nicht untergeordnete Elemente) auf der Seite beeinflusst. Ich war mir nicht sicher, ob es eine Arbeit gibt oder nicht.

<style type="text/css">

#header {
 background-color:red;
}

#header:hover .element {
 background-color:blue;
}

.element {
 background-color:green;
}

</style>

-

<header id="header">
     <li><a href="#">Hover</a></li>
</header>

<div class="element" >
 <p>hello world </p>
</div>
23
WilliamB

Da es sich um benachbarte Geschwister handelt, können Sie den benachbarten Geschwisterselektor : + verwenden.

#header:hover + .element {
 background-color:blue;
}

Dies wird in den meisten modernen Browsern gut unterstützt *. IE7 kann fehlerhaft sein. IE6 und darunter unterstützt es nicht.

* Eine der anderen Antworten erwähnt den allgemeinen Geschwister-Selektor, der in Webkit nicht funktioniert, wenn er mit einer dynamischen Pseudo-Klasse wie :hover verwendet wird, weil dieser Fehler . Beachten Sie, dass derselbe Fehler Probleme in Webkit verursacht, wenn Sie versuchen, benachbarte gleichgeordnete Selektoren mit einer dynamischen Pseudoklasse zu stapeln. Beispielsweise funktioniert #this:hover + sibling + sibling nicht in Webkit.

24
stevelove

Es gibt den allgemeinen Geschwister-Selektor (~), der gleichgeordnete Elemente auswählt.

Mit dem von Ihnen geposteten HTML-Code würde #header:hover ~ .element<div class="element"> auswählen, wenn es ein nachfolgendes gleichgeordnetes Element des schwebenden Headers ist.

Sogar IE 7 unterstützt es , so dass Sie sich auf relativ festem Boden befinden.

16
Paul D. Waite

In diesem Artikel gibt es nur einen CSS-Fehler:

http://css-tricks.com/webkit-sibling-bug/

Zitieren:

body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

Oben erstellt eine Animation auf der Seite, die das Problem auf magische Weise zu beheben scheint. Das obige kann direkt zu main css hinzugefügt werden oder ein Stylesheet für das nur Webkit erstellen, das zu Ihrem ie hacks passt.

Würde das Webkit nur Stylesheet empfehlen, etwa:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio:0)" href="webkit.css"/>

es verbirgt es vor anderen Browsern und kann in Zukunft leichter entfernt werden, sobald der Fehler behoben ist.

2
rjc730

Leider funktioniert dies nur, wenn sich Ihre .element-Klasse innerhalb des .bgchange-Elements befindet. Das ist die Natur der Kaskade: Sie können (allein durch CSS) keine DOM-Elemente beeinflussen, die strukturell/heirarchisch voneinander entfernt sind.

1
Phil.Wheeler