Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Zagnieżdżanie stylów
Forum PHP.pl > Forum > Przedszkole
evolucja
Mam takie menu:
  1. <li><a href="">A</a></li>
  2. <li><a href="" class="active">B</a></li>
  3. <li><a href="">C</a></li>
  4. <li><a href="">D</a></li>

I teraz B jest podświetlony na zielono. Po za tym wszystkie 'a' mają efekt hover podświetlający je również na zielono. Czy da się w stylach zrobić tak, aby po najechaniu np. na 'A' - 'B' straciło podświetlenie? Bo w tym momencie 2 rzeczy będą podświetlone.
erix
Pokaż swój CSS.
evolucja
A ma on jakieś znaczenie dla problemu? To nie mój; napisałem go tutaj, w poście:
  1. a.active { background : red;}
  2. a:hover { background : red;}
motyl-pl
  1. <li id="a"><a href="">A</a></li>
  2. <li id="a"><a href="" class="active">B</a></li>
  3. <li><a href="">C</a></li>
  4. <li><a href="">D</a></li>


#a:hover { background-color: red; }
.active:hover { background-color: ten inny kolor; }
evolucja
Naprawdę tak bardzo niezrozumiale opisałem ten problem czy też kolego wyżej dokładnie tego nie przeczytał? sad.gif
gigzorr
ale jak przypisujesz do a , to chyba do wszystkich elementow nie ? albo ja sie myle.
przypisz do jednego i bedzie gitara tzn do klasy , do reszty tez mozesz cos dac.
evolucja
Raz jeszcze. Mam menu z 10 elementami:
  1. <li><a href="">1</a></li>
  2. <li><a href="" class="active">2</a></li>
  3. <li><a href="">3</a></li>
  4. <li><a href="">4</a></li>
  5. <li><a href="">5</a></li>
  6. <li><a href="">6</a></li>
  7. <li><a href="">7</a></li>
  8. <li><a href="">8</a></li>
  9. <li><a href="">9</a></li>
  10. <li><a href="">10</a></li>

oraz CSS:
  1. a.active { background : yellow;}
  2. a:hover { background : red;}


Efektem tego, jest podświetlony link 2 na czerwono, oraz efekt hover na wszystkich linkach podświetlających je na żółto - po najechaniu myszką na 2 on też zmieni kolor na żółty.

I teraz problem: gdy najedziesz np. na link 5 on zostanie podświetlony na żółto oraz dalej element 2 będzie podświetlony na czerwono. Mi chodzi o to, aby po aktywacji hovera na linkach nie oznaczonych jako 'active' ten jeden z 'active', w tym wypadku 2, stracił to podświetlenie na czerowno. Idąc dalej, po 'zjechaniu' myszką z tego elementu bądź całego menu żeby 2 odzyskało podświetlenie na czerwono. Inaczej mówiąc, aby w danym momencie tylko jeden link mógł być podświetlony.

Przepraszam, prościej już nie potrafię... Oczywiście bez problemu idzie to rozwiązać w JS ale chciałym się najpierw dowiedzieć czy jest to możliwe w czystym CSS.
erix
A nie możesz tego wystawić po prostu live...?

Poza tym, z tego co zrozumiałem, to bez JS się tu nie obejdzie.
thek
Dopóki chcesz korzystać jedynie z CSS - nie da się. Efekt jest taki jaki masz właśnie teraz. Bo nie możesz z poziomu CSS modyfikować struktury DOM elementów. A tym byłoby usunięcie class="active" z linku. Tutaj musisz posłużyć się wspomnianym przez erixa JavaScriptem by zapamiętać link aktywny w momencie gdy myszka jest nad którymś z linków menu i usunąć go, a gdy hover spada z wszystkich elementów menu - przywrócić go zapamiętanemu linkowi.
erix
Nie tyle co chodzi mi o usuwanie, ale nie ma możliwości odwołania się do "rodzeństwa" w DOM wg takich warunków. Może dałoby się wykombinować, ale zadziała to tylko w kilku przeglądarkach.

Idealny byłby tu selektor xpath, ale w CSS go nie ma. tongue.gif
cniak
nie mozesz tak zrobic?

a.active {
background: green;
}

a:hover, a.active {
font-weight: bold;
}

Inny efekt. A jezeli chodzi Ci o to co piszesz wyżej to moim zdaniem to bedzie bardziej odstraszalo niz przyciagalo internaute. Czasami nie warto kombinowac winksmiley.jpg
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.