Jak wpływać na inne elementy, gdy jeden element jest zawieszony

W tym konkretnym przykładzie możesz użyć:

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

Ten przykład działa tylko dlatego, że cube jest potomkiem container. W przypadku bardziej skomplikowanych scenariuszy musisz użyć innego CSS lub JavaScript.

Użycie selektora rodzeństwa jest ogólnym rozwiązaniem do stylizacji innych elementów po najechaniu kursorem na dany element, ale działa tylko wtedy, gdy pozostałe elementy podążają za podanym w DOM. Co możemy zrobić, gdy pozostałe elementy rzeczywiście powinny być przed uniesionym? Powiedzmy, że chcemy zaimplementować widżet oceny paska sygnału, taki jak ten poniżej:

Można to łatwo zrobić za pomocą modelu CSS flexbox, ustawiając flex-direction na reverse, tak aby elementy były wyświetlane w odwrotnej kolejności niż w DOM. Powyższy zrzut ekranu pochodzi z takiego widżetu, zaimplementowanego czystym CSS.

Flexbox jest bardzo dobrze obsługiwany przez 95% współczesnych przeglądarek.

.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>

Tylko to mi pomogło:

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

Gdzie .cube jest klasą CSS #cube.

Testowane w Firefox, Chrome i Edge .

Wielkie podziękowania dla Mike i Robertc za ich pomocne posty!

Jeśli masz dwa elementy w HTML i chcesz :hover nad jednym i skierować zmianę stylu w drugim, dwa elementy muszą być bezpośrednio powiązane -- rodzice, dzieci lub rodzeństwo. Oznacza to, że dwa elementy muszą być jeden wewnątrz drugiego lub oba muszą być zawarte w tym samym większym elemencie.

Chciałem wyświetlić definicje w polu po prawej stronie przeglądarki, gdy moi użytkownicy czytają moja strona i :hover nad podświetlonymi terminami; dlatego nie chciałem, aby element "definicja" był wyświetlany wewnątrz elementu "tekst".

Prawie się poddałem i właśnie dodałem javascript do mojej strony,ale to jest przyszłość! Nie powinniśmy musieć znosić wstecznego sass z CSS i HTML mówi nam, gdzie mamy umieścić nasze elementy, aby osiągnąć pożądane efekty! W końcu poszliśmy na kompromis.

Podczas gdy rzeczywiste elementy HTML w pliku muszą być zagnieżdżone lub atrybut css position może być użyty do wyświetlenia dowolnego elementu w dowolnym miejscu. Użyłem position: fixed, aby umieścić cel mojej akcji :hover tam, gdzie chciałem, na ekranie użytkownika, niezależnie od jego lokalizacji w dokumencie HTML.

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>

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;
}

W tym przykładzie cel polecenia {[2] } z elementu wewnątrz #explainBox musi być #explainBox lub również wewnątrz #explainBox. Atrybuty pozycji przypisane do #definitions zmuszają go do pojawienia się w żądanym miejscu (poza #explainBox), nawet jeśli technicznie znajduje się w niechcianej pozycji w dokumencie HTML.

Rozumiem, że używanie tego samego #id dla więcej niż jednego elementu HTML jest uważane za złe; jednak w tym przypadku instancje #light mogą być opisane niezależnie ze względu na ich odpowiednie pozycje w elementach #id'D. Czy jest jakiś powód, aby nie powtarzać id #light w tym przypadku?

Oto kolejny pomysł, który pozwala wpływać na inne elementy bez uwzględniania żadnego konkretnego selektora i tylko za pomocą stanu :hover głównego elementu.

W tym celu polegam na użyciu niestandardowych właściwości (zmiennych CSS). Jak możemy przeczytać w specyfikacji :

Właściwości niestandardowe są zwykłymi właściwościami , więc można je zadeklarować na dowolny element, są rozwiązane z dziedziczeniem normalnym i kaskady Zasady ...

Chodzi o zdefiniowanie własnych właściwości w głównym elemencie i użycie ich do stylizacji elementów potomnych, a ponieważ te właściwości są dziedziczone, po prostu musimy je zmienić w głównym elemencie po najechaniu kursorem.

Oto przykład:

#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>

Dlaczego może to być lepsze niż użycie konkretnego selektora w połączeniu z hover?

Mogę podać co najmniej 2 powody, które sprawiają, że ta metoda jest dobra do consider:

1. jeśli mamy wiele zagnieżdżonych elementów, które mają te same style, uniknie to skomplikowanego selektora, aby kierować wszystkie z nich po najechaniu kursorem. Używając właściwości niestandardowych, po prostu zmieniamy wartość po najechaniu kursorem na element nadrzędny.
2. właściwość niestandardowa może być użyta do zastąpienia wartości dowolnej właściwości, a także jej częściowej wartości. Na przykład możemy zdefiniować właściwość niestandardową dla koloru i używamy jej w border, linear-gradient, background-color, box-shadow itd. Dzięki temu unikniemy resetowania wszystkich te właściwości na hover.

Oto bardziej złożony przykład:

.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>

Jak widać powyżej, potrzebujemy tylko jednej deklaracji CSS, aby zmienić wiele właściwości różnych elementów.