To, co chcę zrobić, to div
to, że gdy jakiś zostanie ukryty, wpłynie to na właściwości innego div
.
Na przykład, w tej wersji demonstracyjnej JSFiddle , kiedy najedziesz myszką na #cube
to, zmienia się, background-color
ale to, czego chcę, to to, że kiedy najedziesz myszką#container
, #cube
ma to wpływ.
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>
~
dla „kostki jest gdzieś po kontenerze w DOM i dzieli rodzica”#container
jest obok#cube
, tzn.#container
Następuje#cube
?W tym konkretnym przykładzie możesz użyć:
Ten przykład działa tylko, ponieważ
cube
jest dzieckiemcontainer
. W przypadku bardziej skomplikowanych scenariuszy należy użyć innego CSS lub JavaScript.źródło
Korzystanie z selektora rodzeństwa jest ogólnym rozwiązaniem do stylizowania innych elementów po najechaniu myszką na dany element, ale działa tylko wtedy, gdy pozostałe elementy są zgodne z danym elementem w DOM . Co możemy zrobić, gdy pozostałe elementy powinny znajdować się przed ukrytym? Powiedzmy, że chcemy zaimplementować widget oceniania paska sygnału, taki jak ten poniżej:
Można to faktycznie zrobić łatwo za pomocą modelu CSS Flexbox, ustawiając
flex-direction
nareverse
, aby elementy były wyświetlane w odwrotnej kolejności niż w DOM. Powyższy zrzut ekranu pochodzi z takiego widgetu, zaimplementowanego w czystym CSS.Flexbox jest bardzo dobrze obsługiwany przez 95% nowoczesnych przeglądarek.
Pokaż fragment kodu
źródło
.rating div
, Usuń margines i dodajborder-right: 4px solid white;
Ogromne podziękowania dla Mike'a i Robertca za ich pomocne posty!
Jeśli masz dwa elementy w swoim HTML i chcesz
:hover
zmienić jeden z nich i zmienić styl na drugi, oba elementy muszą być bezpośrednio powiązane - rodzice, dzieci lub rodzeństwo. Oznacza to, że dwa elementy muszą znajdować się jeden w drugim lub oba muszą znajdować się w tym samym większym elemencie.Chciałem wyświetlać definicje w polu po prawej stronie przeglądarki, gdy moi użytkownicy czytają moją witrynę i
:hover
wyróżniają terminy; dlatego nie chciałem, aby element „definicja” był wyświetlany w elemencie „tekst”.Prawie się poddałem i po prostu dodałem javascript do mojej strony, ale to jest przyszłość! Nie powinniśmy znosić tylnego sassa z CSS i HTML, który mówi nam, gdzie musimy 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 zawarte w jednym elemencie, aby były
:hover
dla siebie ważnymi celami, cssposition
atrybutu można używać do wyświetlania dowolnego elementu w dowolnym miejscu. Użyłem position: fixed, aby umieścić cel mojej:hover
akcji tam, gdzie chciałem, na ekranie użytkownika, niezależnie od jego lokalizacji w dokumencie HTML.HTML:
CSS:
W tym przykładzie cel
:hover
polecenia z elementu wewnątrz#explainBox
musi być#explainBox
albo w środku#explainBox
. Atrybuty pozycji przypisane do #definicji zmuszają go do pojawienia się w żądanej lokalizacji (na zewnątrz#explainBox
), nawet jeśli technicznie znajduje się w niepożądanej pozycji w dokumencie HTML.Rozumiem, że używanie tego samego
#id
do więcej niż jednego elementu HTML jest uważane za złą formę ; jednakże w tym przypadku przypadki#light
można opisać niezależnie ze względu na ich odpowiednie pozycje w unikatowych#id
elementach. Czy istnieje powód, abyid
#light
w tym przypadku nie powtarzać ?źródło
ID
wiele razy. Po prostu użyjclass
.Tylko to działało dla mnie:
Gdzie
.cube
jest CssClass z#cube
.Testowane w Firefox , Chrome i Edge .
źródło
Oto kolejny pomysł, który pozwala wpływać na inne elementy bez rozważania żadnego konkretnego selektora i tylko przy użyciu
:hover
stanu głównego elementu.W tym celu polegam na użyciu właściwości niestandardowych (zmiennych CSS). Jak możemy przeczytać w specyfikacji :
Chodzi o to, aby zdefiniować niestandardowe właściwości w głównym elemencie i używać ich do stylizowania elementów potomnych, a ponieważ te właściwości są dziedziczone, wystarczy je zmienić w głównym elemencie po najechaniu myszą.
Oto przykład:
Dlaczego może to być lepsze niż używanie określonego selektora w połączeniu z aktywowaniem?
Mogę podać co najmniej 2 powody, które sprawiają, że ta metoda jest dobra do rozważenia:
border
,linear-gradient
,background-color
,box-shadow
itd. To pozwoli uniknąć nam resetowanie wszystkich tych właściwości przy aktywowaniu.Oto bardziej złożony przykład:
Jak widzimy powyżej, potrzebujemy tylko jednej deklaracji CSS , aby zmienić wiele właściwości różnych elementów.
źródło