Przezroczystość dwóch divów po najechaniu na inny

Question

Witam znowu, tym razem mam nieco bardziej złożony problem. Wkleję grafike, żeby było mi łatwiej objaśnić  http://i.imgur.com/sDp6tkF.jpg

Chciałbym aby po najechaniu na "div1" zareagowały divy "div2" oraz "div3". Jeżeli byłoby to prostrze, można na pewno też zrobić tak, że po najechaniu na "div2" reagują razem "div2" i "div3" i po najechaniu na "div3" dzieje się to samo. Domyślam się, że takie cuda to już nie będzie już czysty css a javascript a na tym się kompletnie nie znam i nawet jakbym coś znalazł w googlu, to nic bym nie zrozumiał :/

Z góry dzięki za pomoc!

Answer 1

Hmm...To może w wolnej chwili rusz z nauką JavaScript od podstaw? Metoda małych kroczków kolego.

A co do Twojego pytania, to jak najbardziej jest to możliwe za pomocą JS.

Co do sprawy, czy w CSS można to zrobić - myślę, że można to wykombinować w ten sposób - stwórz klasę odpowiedzialną za przezroczystość i nadaj ją każdemu z divów. Potem korzystając z pseudoklasy hover wykonaj na niej efekt przezroczystości. W takim wypadku wszystkie trzy divy dostaną przezroczystość, jeśli najedziesz na którykolwiek z nich. No i jeszcze jako problem dochodzi, czy inny selektor np. ID nie ustawia innej własności parametru przezroczystości. Możesz spróbować w ten sposób, ale raczej rekomendowałbym JS.

Comments

JS strasznie mnie odpycha, ale mam w bliskich planach naukę. Nie byłoby to problemem i nie prosiłbym o pomoc, gdyby nie to, że zadeklarowałem się kolegom z klanu, że zrobię stronę do końca tygodnia :D Zaraz sprawdzę, czy sposób z klasą się uda.

EDIT: Wszystko działa, dzięki wielkie, na szczęście obeszło się bez JS i to co doradziłeś wystarczyło. Jak zwykle wyszedłem na durnia ;P

---

Nie martw się, nie wyszedłeś. Każdy kiedyś zaczynał, a no i ważne, że zrobiłeś to samodzielnie - następnym razem już będziesz wiedział. :)

---

Warto dodać ze w CSS :hover nie musi być na końcu selektora i użycie :hovera w odpowiedni sposób chyba jest najlepsze i najszybsze w JS napisanie tego zejeło by więcej czasu ja polecam CSSa do takich rzeczy :) Mały przykładzik w mojej odpowiedzi :)

Answer 2

to czysty CSS :)

div1:hover div2,
div1:hover div3{
     opacity:0.7;
}

 

Comments

Spotkałem się już gdzieś ze stawianiem ">"," ~" między divami, ale nie wiedziałem na jakiej zasadzie to działa i jak to nazwać, żeby znaleźć to w googlu.Mógłbyś mi powiedzieć jak to się nazywa, żebym mógł poszukać o tym jakiś artykułów w necie?

---

Sorry te strzałki nie były potrzebne już zedytowałem a > mówi ze chodzi nam o zagłebienie o jeden poziom czyli jeżeli div2 jest bezpośrednio w div1 

<div1><div2>...</div2></div1>

gdyby miedzy nimi był jeszcze jakiś element 

<div1><div><div2>....</div2></div></div1>

to selektor z strzałką nie zadziała chyba ze zrobimy go tak
 

div1 > div > div2

a wszystko mamy tutaj 
http://www.w3.org/TR/selectors/

koniec pierwszej tabelki