Was ich tun möchte, ist, wenn ein bestimmtes div
schwebt, würde es die Eigenschaften eines anderen beeinflussen div
.
Zum Beispiel in diesem JSFiddle Demo , wenn Sie schweben über #cube
es das ändert sich background-color
aber , was ich will , ist , dass , wenn ich schweben über #container
, #cube
betroffen ist .
div {
outline: 1px solid red;
}
#container {
width: 200px;
height: 30px;
}
#cube {
width: 30px;
height: 100%;
background-color: red;
}
#cube:hover {
width: 30px;
height: 100%;
background-color: blue;
}
<div id="container">
<div id="cube">
</div>
</div>
~
für "Würfel ist irgendwo nach Container im DOM und teilt sich ein Elternteil"#container
neben#cube
, dh#container
folgt#cube
?In diesem Beispiel können Sie Folgendes verwenden:
Dieses Beispiel funktioniert nur, da
cube
es ein Kind von istcontainer
. Für kompliziertere Szenarien müssten Sie anderes CSS oder JavaScript verwenden.quelle
Die Geschwister - Selektor ist die allgemeine Lösung für andere Elemente Styling , wenn sie über einen gegebenen schwebt, aber es funktioniert nur , wenn die anderen Elemente , die die gegebenen in der DOM folgen . Was können wir tun, wenn die anderen Elemente tatsächlich vor dem schwebenden liegen sollten? Angenommen, wir möchten ein Signalbalken-Bewertungs-Widget wie das folgende implementieren:
Dies kann mithilfe des CSS-Flexbox-Modells problemlos durchgeführt werden, indem
flex-direction
auf eingestellt wirdreverse
, sodass die Elemente in der entgegengesetzten Reihenfolge angezeigt werden wie im DOM. Der obige Screenshot stammt von einem solchen Widget, das mit reinem CSS implementiert wurde.Flexbox wird von 95% der modernen Browser sehr gut unterstützt .
Code-Snippet anzeigen
quelle
.rating div
, entfernen Sie den Rand und fügenborder-right: 4px solid white;
Vielen Dank an Mike und Robertc für ihre hilfreichen Beiträge!
Wenn Sie zwei Elemente in Ihrem HTML-Code haben und
:hover
über eines hinausgehen und eine Stiländerung im anderen anstreben möchten, müssen die beiden Elemente direkt miteinander verbunden sein - Eltern, Kinder oder Geschwister. Dies bedeutet, dass die beiden Elemente entweder ineinander liegen müssen oder beide in demselben größeren Element enthalten sein müssen.Ich wollte Definitionen in einem Feld auf der rechten Seite des Browsers anzeigen, während meine Benutzer meine Website und
:hover
über hervorgehobene Begriffe lesen . Daher wollte ich nicht, dass das Element 'definition' im Element 'text' angezeigt wird.Ich hätte fast aufgegeben und gerade Javascript zu meiner Seite hinzugefügt, aber das ist die Zukunft, verdammt! Wir sollten uns nicht mit CSS und HTML abfinden müssen, die uns sagen, wo wir unsere Elemente platzieren müssen, um die gewünschten Effekte zu erzielen! Am Ende haben wir Kompromisse geschlossen.
Während die tatsächlichen HTML-Elemente in der Datei entweder verschachtelt oder in einem einzelnen Element enthalten sein müssen, um gültige
:hover
Ziele für einander zu sein, kann das CSS-position
Attribut verwendet werden, um jedes Element anzuzeigen, wo immer Sie möchten. Ich habe position: fix verwendet, um das Ziel meiner:hover
Aktion an der gewünschten Stelle auf dem Bildschirm des Benutzers zu platzieren, unabhängig von seiner Position im HTML-Dokument.Das HTML:
Das CSS:
In diesem Beispiel muss das Ziel eines
:hover
Befehls von einem Element innerhalb oder#explainBox
entweder#explainBox
innerhalb sein#explainBox
. Die Positionsattribute, die #definitions zugewiesen sind, erzwingen, dass es an der gewünschten Stelle (außerhalb#explainBox
) angezeigt wird, obwohl es sich technisch an einer unerwünschten Position innerhalb des HTML-Dokuments befindet.Ich verstehe, dass es als schlechte Form angesehen wird, dasselbe
#id
für mehr als ein HTML-Element zu verwenden. In diesem Fall können die Instanzen von#light
jedoch aufgrund ihrer jeweiligen Position in eindeutig#id
d-Elementen unabhängig beschrieben werden. Gibt es einen Grund,id
#light
dies in diesem Fall nicht zu wiederholen ?quelle
ID
mehrmals verwenden. Verwenden Sie einfach eineclass
.Nur das hat bei mir funktioniert:
Wo
.cube
ist CssClass der#cube
.Getestet in Firefox , Chrome und Edge .
quelle
Hier ist eine weitere Idee, mit der Sie andere Elemente beeinflussen können, ohne einen bestimmten Selektor zu berücksichtigen und nur den
:hover
Status des Hauptelements zu verwenden.Dafür werde ich mich auf die Verwendung von benutzerdefinierten Eigenschaften (CSS-Variablen) verlassen. Wie wir in der Spezifikation lesen können :
Die Idee ist, benutzerdefinierte Eigenschaften innerhalb des Hauptelements zu definieren und sie zum Formatieren untergeordneter Elemente zu verwenden. Da diese Eigenschaften vererbt werden, müssen sie beim Hover einfach innerhalb des Hauptelements geändert werden.
Hier ist ein Beispiel:
Warum kann dies besser sein als die Verwendung eines bestimmten Selektors in Kombination mit einem Schwebeflug?
Ich kann mindestens zwei Gründe nennen, die diese Methode zu einer guten Überlegung machen:
border
,linear-gradient
,background-color
,box-shadow
usw. Dadurch wird vermieden , uns alle diese Eigenschaften auf schweben Reseting.Hier ist ein komplexeres Beispiel:
Wie wir oben sehen können, benötigen wir nur eine CSS-Deklaration , um viele Eigenschaften verschiedener Elemente zu ändern.
quelle