Wie sich andere Elemente beeinflussen lassen, wenn ein Element schwebt

Question

Was ich tun möchte, ist, dass wenn ein bestimmtes div berührt wird, es die Eigenschaften eines anderen div beeinflusst.

Zum Beispiel in diesem JSFiddle-Demo, wenn du über #cube fährst, ändert es die background-color, aber was ich möchte ist, dass wenn ich über #container fahre, #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;
}

Answer 1

Großer Dank an Mike und Robertc für ihre hilfreichen Beiträge!

Wenn Sie zwei Elemente in Ihrem HTML haben und über eines mit :hover fahren und eine Stiländerung im anderen anvisieren möchten, müssen die beiden Elemente direkt miteinander verbunden sein - Eltern, Kinder oder Geschwister. Das bedeutet, dass die beiden Elemente entweder ineinander liegen müssen oder sich innerhalb desselben größeren Elements befinden müssen.

Ich wollte Definitionen in einer Box auf der rechten Seite des Browsers anzeigen, während meine Benutzer meine Seite lesen und über markierte Begriffe mit :hover fahren; daher wollte ich nicht, dass das 'definition'-Element innerhalb des 'text'-Elements angezeigt wird.

Ich war kurz davor aufzugeben und einfach Javascript zu meiner Seite hinzuzufügen, aber das ist die Zukunft verdammt! Wir sollten uns nicht mit Rückmeldungen von CSS und HTML darüber herumschlagen müssen, wo wir unsere Elemente platzieren müssen, um die Effekte zu erzielen, die wir wollen! Am Ende haben wir einen Kompromiss gefunden.

Während die tatsächlichen HTML-Elemente in der Datei entweder verschachtelt sein müssen oder sich in einem einzigen Element befinden müssen, um gültige :hover-Ziele für einander zu sein, kann das CSS position-Attribut verwendet werden, um jedes Element anzuzeigen, wo auch immer Sie wollen. Ich habe position:fixed verwendet, um das Ziel meiner :hover-Aktion dort zu platzieren, wo ich es auf dem Bildschirm des Benutzers haben wollte, unabhängig von seiner Position im HTML-Dokument.

Das HTML:

 /*Gemeinsamer Elternknoten*/

  Licht                            /*markierter Begriff im Text*/
   ist so allgegenwärtig wie geheimnisvoll. /*reiner Text*/

   /*Container für bei :hover angezeigte Definitionen*/
     /*Beispieldefinitionseintrag*/ Licht:
      Kurze Antwort: Die Art von Energie, die man sieht

Das CSS:

/*lesen: "wenn Benutzer über #light irgendwo innerhalb von #explainBox fährt,
    setze display auf inline-block für #light direkt innerhalb von #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 :hover-Befehls von einem Element innerhalb von #explainBox entweder #explainBox sein oder sich auch innerhalb von #explainBox befinden. Die Positionseigenschaften, die #definitions zugeordnet sind, zwingen es, an dem gewünschten Ort (außerhalb von #explainBox) angezeigt zu werden, auch wenn es sich technisch an einer unerwünschten Position im HTML-Dokument befindet.

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

Answer 2

WARNUNG: Wenn Sie CSS verwenden können: Verwenden Sie CSS ohne Javascript!

Wenn Sie ein Element mit einer unbekannten / oder nicht erreichbaren Position auswählen möchten, könnten Sie JavaScript verwenden.

const cube = document.getElementById('cube')
const container = document.getElementById('container')

cube.addEventListener('mouseover', () => container.style.backgroundColor = "blue")
cube.addEventListener('mouseleave', () => container.style.backgroundColor = "white")

div {
  outline: 1px solid red;
  width: 200px;
  height: 30px;
}

#cube {
  background-color: red;
}

Answer 3

#imageDiv:hover  #detailDiv
{
    z-index: -999 !important;
}

hier

#imageDiv ist das erste

, das gehovert werden soll, und

#detailDiv ist das zweite

, auf das der CSS-Hover angewendet wird

also wenn ich auf das erste div hovere, wird das z-index dem zweiten div zugewiesen

Funktioniert für mich