[Bartholomew]

#webdev #html #css

Hej, zielonka w temacie css here. Czy ktoś może mnie oświecić, czemu tu najechany k1 zmienia kolor k2 a najechany k2 nie zmienia koloru k1???

div {
width: 4vh;
height: 4vh;
cursor: pointer;
}

.k1 {
background-color: blue;
}

.k2 {
background-color: red;
}

.k1:hover+.k2 {
background-color: orange;
}

.k2:hover+.k1 {
background-color: orange;
}

[Psychopatologia_stosowana]

@Bartholomew: na przyszłość zawsze używaj czegoś do wklejania kodu np codepen
https://codepen.io/anon/pen/ZVXebj

https://www.w3schools.com/csSref/sel_element_pluss.asp

.foo + .bar - zmieni te .bar które są od razu

[radziu_11]

@Bartholomew: + oznacza element który znajduje się po elemencie. k1 nie znajduje się po k2

[Bartholomew]

żywaj czegoś do wklejania kodu np codepen

@Psychopatologia_stosowana: OK, następnym razem będę wiedział.
Chciałem, żeby element późniejszy (w kodzie) zmieniał kolor elementu wcześniejszego.

[radziu_11]

@Bartholomew: w CSS nie można tak łatwo stylować sąsiadującego poprzedniego elementu. Tzn. nie ma odpowiednika +, który działałby w drugą stronę. W JavaScript będzie łatwiej.

[Psychopatologia_stosowana]

@Bartholomew: niestety za pomocą pojedynczej reguły nie jest to do zrobienia. Można wybierać następne, ale nie poprzednie.
+ to pojedynczy po, a ~ to wszystkie po.
Znalazłem jednak brzydki hack jak to zrobić samym css:
https://stackoverflow.com/a/27993987
inną opcją jest użycie JavaScriptu.

[enslavedeagle]

@Bartholomew: Bo "+" działa tylko "w przód".

[Bartholomew]

@Psychopatologia_stosowana: @radziu_11: @radziu_11: @enslavedeagle:

Dzięki wszystkim.