Css nth-child: vznášať ~ first-child {...} - html, css, hover, css-selectors

Pokúšam sa zmeniť prvé dieťa, keď sa vznášam na druhom dieťati. Ako to robíte len s html a css?

(S tildou / ~ Zdá sa, že môžem vybrať childeren smerom nadol v html kóde, ale nie hore. Musím použiť iný selektor, aby som išiel hore?)

Grtz

<div id="container">
<div id="box1"></div>
<div id="box2"></div>
</div>

<style>
#box1 {
height: 100px;
width: 100px;
background-color: red;
}

#box2 {
height: 100px;
width: 100px;
background-color: lime;
}

#box2:hover ~ #box1 {
height: 300px;
width: 300px;
background-color: yellow;
}

</style>

odpovede:

2 pre odpoveď č. 1

Generálni selektéri súrodencov, to vyjadruje tilde, vyberú len súrodencov nasledujúce (bez predchádzajúceho) zodpovedajúceho prvku.

Prvky predstavované dvoma sekvenciamizdieľajú rovnaký rodič v strome dokumentov a prvok reprezentovaný prvou sekvenciou predchádza (nie nevyhnutne okamžite) prvok reprezentovaný druhým.

referencie: http://www.w3.org/TR/css3-selectors/#general-sibling-combinators

---

Vo vašom prípade môže existovať šanca iba na CSS archivovať. Vlastne dva ...

Šanca 1

Na rodičov :hover, zmeniť deti.

#container:hover div:first-child {
background-color: #cff;
}

Vo vašom prípade je to potrebné #container byť display: inline-block;, inak by sa zmenilo aj červené pole, keď sa vznáša prázdna oblasť vpravo do obidvoch políčok.

bin: http://jsbin.com/dilitucije/1

Funguje vo všetkých moderných prehliadačoch a väčšine starších prehliadačov.

Šanca 2

Použil som flexbox s definovaným poradím na zvrátenie vykresľovania obidvoch položiek. Pretože poradie renderovania prvkov je obrátené, ale poradie DOM nie je, funguje to.

CSS:

.reversed {
display: flex;
flex-direction: column-reverse; /* reverse rendering */
}

#container div:hover:first-child ~ div {
background-color: #cff;
}

Vysvetlenie pravidiel Flexbox:

• používať Flexbox (skvelé vysvetlenie, Špecifikácia W3C)
• objednať položky v riadkoch (kontajner je "column"), zvrátiť poradie položiek v rámci .reversed kontajner (prvý uzol DOM je vykreslený ako posledný, prvý uzol DOM je vykreslený ako prvý)

Pridajte triedu do svojho #container

<div id="container" class="reversed">...</div>

bin: http://jsbin.com/piyokulehe/1

Pracuje v FF 34, Chrome 39, by mal pracovať aspoň v IE 11 (pravdepodobne nie je IE10).

aktualizácia:

• Opravená chyba row-reverse (príklad používa column-reverse, zodpovedá vašej požiadavke)
• Odstránené zbytočné justify-content (pretože položky sú vykreslené do riadkov, nie je to potrebné)
• Pridané vysvetlenie riešenia Flexbox

---

0 pre odpoveď č. 2

Ak chcete dosiahnuť toto na vznášadle, musíte mať prvok element dieťaťa alebo prichádzať po prvku, ktorý sa vznáša.

Prvok, ktorého štýly je potrebné zmeniť, musí byť potomkom vznášaného prvku alebo prichádza vedľa neho do práce

---