Jak wpływać na inne elementy, gdy jeden element jest zawieszony
To, co chcę zrobić, to gdy pewna div
jest zawieszona, to wpłynie na właściwości innej div
.
Na przykład, w to demo JSFiddle , Kiedy najedziesz na #cube
zmienia background-color
, ale chcę tego, gdy najedziesz na #container
, #cube
ma 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>
6 answers
Jeśli kostka znajduje się bezpośrednio wewnątrz pojemnika:
#container:hover > #cube { background-color: yellow; }
Jeśli cube znajduje się obok (po zamknięciu znacznika kontenerów) kontenera:
#container:hover + #cube { background-color: yellow; }
Jeśli kostka znajduje się gdzieś wewnątrz pojemnika:
#container:hover #cube { background-color: yellow; }
Jeśli kostka jest rodzeństwem pojemnika:
#container:hover ~ #cube { background-color: yellow; }
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-01 12:47:25
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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-10-24 17:30:00
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-09 09:54:36
Tylko to mi pomogło:
#container:hover .cube { background-color: yellow; }
Gdzie .cube
jest klasą CSS #cube
.
Testowane w Firefox, Chrome i Edge .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-18 10:13:46
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?
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-18 10:13:32
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:
- 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.
- 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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-17 22:17:41