[CSS]Zagnieżdżanie stylów Opcje

[evolucja]

Mam takie menu:

[HTML] pobierz, plaintext 
<li><a href="">A</a></li>
<li><a href="" class="active">B</a></li>
<li><a href="">C</a></li>
<li><a href="">D</a></li>
[HTML] pobierz, plaintext 

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:

[HTML] pobierz, plaintext 
a.active { background : red;}
a:hover { background : red;}
[HTML] pobierz, plaintext 

[motyl-pl]

[HTML] pobierz, plaintext 
<li id="a"><a href="">A</a></li>
<li id="a"><a href="" class="active">B</a></li>
<li><a href="">C</a></li>
<li><a href="">D</a></li>
[HTML] pobierz, plaintext 

#a:hover { background-color: red; }
.active:hover { background-color: ten inny kolor; }

Ten post edytował motyl-pl 17.07.2010, 19:57:57

[evolucja]

Naprawdę tak bardzo niezrozumiale opisałem ten problem czy też kolego wyżej dokładnie tego nie przeczytał? (IMG:style_emoticons/default/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.

Ten post edytował gigzorr 17.07.2010, 20:18:33

[evolucja]

Raz jeszcze. Mam menu z 10 elementami:

[HTML] pobierz, plaintext 
<li><a href="">1</a></li>
<li><a href="" class="active">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
[HTML] pobierz, plaintext 

oraz CSS:

[HTML] pobierz, plaintext 
a.active { background : yellow;}
a:hover { background : red;} 
[HTML] pobierz, plaintext 

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. (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/winksmiley.jpg)