it-swarm.com.de

Wie andere Elemente beeinflusst werden, wenn sich ein Div im Mauszeiger befindet

Ich denke, das ist eine sehr grundlegende Frage, aber ich bin mir nicht sicher, wie es gemacht werden kann.

Was ich tun möchte, ist, wenn ein bestimmtes div schwebt, dies würde die Eigenschaften eines anderen div beeinflussen.

In diesem einfachen Beispiel ändert sich beim Bewegen des Mauszeigers über #cube der background-color, aber ich möchte, dass beim Bewegen des Mauszeigers über #container, #cubeist betroffen.

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>
383
Trufa

Wenn sich der Würfel direkt im Behälter befindet:

#container:hover > #cube { background-color: yellow; }

Befindet sich der Cube neben dem Container (nachdem der Container das Tag geschlossen hat):

#container:hover + #cube { background-color: yellow; }

Wenn sich der Würfel irgendwo im Container befindet:

#container:hover #cube { background-color: yellow; }

Wenn der Würfel ein Geschwister des Containers ist:

#container:hover ~ #cube { background-color: yellow; }
841
Mike

In diesem speziellen Beispiel können Sie Folgendes verwenden:

#container:hover #cube {
    background-color: yellow;   
}

Dies funktioniert nur, da cube ein Kind von container ist. Für kompliziertere Szenarien müssten Sie Javascript verwenden.

36
Emmett

Die Verwendung der Geschwisterauswahl ist die allgemeine Lösung für das Stylen anderer Elemente, wenn Sie mit der Maus über ein bestimmtes Element fahren. Aber Es funktioniert nur, wenn die andere Elemente folgen dem angegebenen im DOM . Was können wir tun, wenn die anderen Elemente tatsächlich vor dem schwebenden sein sollen? Angenommen, wir möchten ein Widget für die Signalleistenbewertung wie das folgende implementieren:

Signal bar rating widget

Dies kann mithilfe des CSS-Modells flexbox problemlos durchgeführt werden, indem flex-direction auf reverse gesetzt wird, sodass die Elemente in der entgegengesetzten Reihenfolge von angezeigt werden die, die sie im DOM sind. Der Screenshot oben stammt von einem solchen Widget, das mit reinem CSS implementiert wurde.

Flexbox wird sehr gut unterstützt von 95% der modernen Browser.

_.rating {
  display: flex;
  flex-direction: row-reverse;
  width: 9rem;
}
.rating div {
  flex: 1;
  align-self: flex-end;
  background-color: black;
  border: 0.1rem solid white;
}
.rating div:hover {
  background-color: lightblue;
}
.rating div[data-rating="1"] {
  height: 5rem;
}
.rating div[data-rating="2"] {
  height: 4rem;
}
.rating div[data-rating="3"] {
  height: 3rem;
}
.rating div[data-rating="4"] {
  height: 2rem;
}
.rating div[data-rating="5"] {
  height: 1rem;
}
.rating div:hover ~ div {
  background-color: lightblue;
}_
_<div class="rating">
  <div data-rating="1"></div>
  <div data-rating="2"></div>
  <div data-rating="3"></div>
  <div data-rating="4"></div>
  <div data-rating="5"></div>
</div>_
28
Dan Dascalescu

Vielen Dank an Mike und Robertc für ihre hilfreichen Beiträge!

Wenn Sie zwei Elemente in Ihrem HTML-Code haben und über eines :hover möchten und auf eine Stiländerung im anderen abzielen, müssen die beiden Elemente in direktem Zusammenhang stehen - Eltern, Kinder oder Geschwister. Dies bedeutet, dass die beiden Elemente entweder ineinander oder 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 Site und :hover über hervorgehobenen Begriffen lesen. Daher wollte ich nicht, dass das 'definition'-Element im' text'-Element 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, wo wir unsere Elemente platzieren müssen, um die gewünschten Effekte zu erzielen! Am Ende sind wir Kompromisse eingegangen.

Während die tatsächlichen HTML-Elemente in der Datei entweder verschachtelt sein müssen oder in einem einzelnen Element enthalten sein müssen, um gültige :hover -Ziele zueinander zu haben, kann das Attribut css position zum Anzeigen eines beliebigen Elements verwendet werden Ich habe position: fixed verwendet, um das Ziel meiner :hover -Aktion auf dem Bildschirm des Benutzers zu platzieren, unabhängig von der Position im HTML-Dokument.

Das HTML:

<div id="explainBox" class="explainBox"> /*Common parent*/

  <a class="defP" id="light" href="http://en.wikipedia.or/wiki/Light">Light                            /*highlighted term in text*/
  </a> is as ubiquitous as it is mysterious. /*plain text*/

  <div id="definitions"> /*Container for :hover-displayed definitions*/
    <p class="def" id="light"> /*example definition entry*/ Light:
      <br/>Short Answer: The type of energy you see
    </p>
  </div>

</div>

Das CSS:

/*read: "when user hovers over #light somewhere inside #explainBox
    set display to inline-block for #light directly inside of #definitions.*/

#explainBox #light:hover~#definitions>#light {
  display: inline-block;
}

.def {
  display: none;
}

#definitions {
  background-color: black;
  position: fixed;
  /*position attribute*/
  top: 5em;
  /*position attribute*/
  right: 2em;
  /*position attribute*/
  width: 20em;
  height: 30em;
  border: 1px solid orange;
  border-radius: 12px;
  padding: 10px;
}

In diesem Beispiel muss das Ziel eines Befehls :hover eines Elements in #explainBox entweder #explainBox oder auch #explainBox sein. Die Positionsattribute, die #definitions zugewiesen sind, erzwingen, dass sie an der gewünschten Position (außerhalb von #explainBox) angezeigt werden, obwohl sie sich technisch an einer unerwünschten Position im HTML-Dokument befinden.

Ich verstehe, es wird als schlechte Form angesehen, dasselbe #id für mehr als ein HTML-Element zu verwenden. In diesem Fall können die Instanzen von #light jedoch aufgrund ihrer jeweiligen Positionen in eindeutig #id d-Elementen unabhängig voneinander beschrieben werden. Gibt es einen Grund, den id#light in diesem Fall nicht zu wiederholen?

7
rick

Nur das hat bei mir geklappt:

#container:hover .cube { background-color: yellow; }

Wobei .cube CssClass des #cube ist.

Getestet in Firefox, Chrome und Edge.

5
CyberHawk

Hier ist eine weitere Idee, mit der Sie andere Elemente beeinflussen können, ohne einen bestimmten Selektor zu berücksichtigen und indem Sie nur den :hover -Status des Hauptelements verwenden.

Hierfür werde ich auf die Verwendung von benutzerdefinierten Eigenschaften (CSS-Variablen) zurückgreifen. Wie wir in der Spezifikation lesen können :

Benutzerdefinierte Eigenschaften sind gewöhnliche Eigenschaften, so dass sie für jedes Element deklariert werden können, werden aufgelöst mit der normalen Vererbung und KaskadeRegeln ...

Die Idee ist, benutzerdefinierte Eigenschaften innerhalb des Hauptelements zu definieren und sie zum Gestalten von untergeordneten Elementen zu verwenden. Da diese Eigenschaften vererbt werden, müssen sie nur innerhalb des Hauptelements beim Hover geändert werden.

Hier ist ein Beispiel:

#container {
  width: 200px;
  height: 30px;
  border: 1px solid var(--c);
  --c:red;
}
#container:hover {
  --c:blue;
}
#container > div {
  width: 30px;
  height: 100%;
  background-color: var(--c);
}
<div id="container">
  <div>
  </div>
</div>

Warum kann dies besser sein als die Verwendung eines bestimmten Selektors in Kombination mit Hover?

Ich kann mindestens zwei Gründe nennen, die diese Methode zu einem guten Grund machen:

  1. Wenn wir viele verschachtelte Elemente haben, die die gleichen Stile haben, erspart dies uns eine komplexe Auswahl, um sie alle beim Schweben anzuvisieren. Mit den benutzerdefinierten Eigenschaften ändern wir einfach den Wert, wenn Sie den Mauszeiger über das übergeordnete Element bewegen.
  2. Eine benutzerdefinierte Eigenschaft kann verwendet werden, um einen Wert einer beliebigen Eigenschaft sowie einen Teil davon zu ersetzen. Zum Beispiel können wir eine benutzerdefinierte Eigenschaft für eine Farbe definieren und diese innerhalb von border, linear-gradient, background-color, box-shadow usw. verwenden. Auf diese Weise können wir nicht alle diese Eigenschaften zurücksetzen auf schweben.

Hier ist ein komplexeres Beispiel:

.container {
  --c:red;
  width:400px;
  display:flex;
  border:1px solid var(--c);
  justify-content:space-between;
  padding:5px;
  background:linear-gradient(var(--c),var(--c)) 0 50%/100% 3px no-repeat;
}
.box {
  width:30%;
  background:var(--c);
  box-shadow:0px 0px 5px var(--c);
  position:relative;
}
.box:before {
  content:"A";
  display:block;
  width:15px;
  margin:0 auto;
  height:100%;
  color:var(--c);
  background:#fff;
}

/*Hover*/
.container:hover {
  --c:blue;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>

Wie wir oben sehen können, brauchen wir nur eine CSS-Deklaration, um viele Eigenschaften verschiedener Elemente zu ändern.

0
Temani Afif