Zmiana tla div po najechaniu, W Mozilli działa, w IE oczywiście nie Opcje

[wojtek]

Witam,

Mam sobie taki kod:

[HTML] pobierz, plaintext 
<div class="menuOption">- <a href="1.php">Strona główna</a></div>
<div class="menuOption">- <a href="2.php">Podstrona</a></div>
[HTML] pobierz, plaintext 

i do tego CSS:

Kod

.menuOption {
width: 140px;
text-align: left;
padding-left: 10px;
line-height: 16px;
font-size: 11px;
color: #4B4B4B;
font-family: verdana;
}

.menuOption:hover {
background-color: #EFEFEF;
}

Chce zrobić tak, by po najechaniu kursorem "na diva", zmienił się kolor jego tła. Taki kod jak powyżej działa, ale tylko w Firefoxie i Operze, w IE nic sie nie dzieje. Ma ktoś pomysł dlaczego? Co muszę dodać do tego kodu, aby w IE również to działało?

Z góry dzięki za pomoc, ja już nie mam żadnego pomysłu...

[quiris]

Taki kod jak powyżej działa, ale tylko w Firefoxie i Operze, w IE nic sie nie dzieje. Ma ktoś pomysł dlaczego?

Pseudoklasa :hover działa w MSIE tylko dla zakotwiczeń a. Podobnie zachowuje się Mozilla w trybie Quirks Mode (emuluje ograniczenie MSIE).

Możesz sobie to sprawdzić na tej stronie: http://www.quirksmode.org/css/hover.html

Mógłbyś skorzystać z pakietu IE7: http://dean.edwards.name/IE7/compatibility/ który likwiduje to ograniczenie.

Ten post edytował quiris 25.06.2004, 16:31:02

[wojtek]

Dzięki za odpowiedź, tak myślałem że to genialny produkt Microsofta czegoś nie obsługuje.. Szkoda że tylu ludzi tego używa...

Co do mojego kodu to rozwiązanie z IE 7.0 wydaje mi się troche skomplikowane i chyba nie warte świeczki w moim przypadku, rozwiązałem to za pomocą JS:

Kod

<div onmouseover="this.className='menuOptionS';" onmouseout="this.className='menuOption';" class="menuOption">- <a href="index.php">Strona 1</a></div>
<div onmouseover="this.className='menuOptionS';" onmouseout="this.className='menuOption';" class="menuOption">- <a href="strona.php">Strona 2</a></div>

Wyglada co prawda gorzej niz:

Kod

<div class="menuOption">- <a href="index.php">Strona 1</a></div>

Ale myślę, że w mojej sytuacji to wyjście jest najlepsze..

Dzięki za pomoc.

[Dominik]

Podobnie zachowuje się Mozilla w trybie Quirks Mode

Chyba u Ciebie (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) bo u mnie zawsze Mozilla wyswietla pseudoklase hover.

(emuluje ograniczenie MSIE).

Zalkowicie zbedny komentarz, szczegolnie ze w emulacji IE to Opera ma wieksze doswiadczenie... (IMG:http://forum.php.pl/style_emoticons/default/angrysmiley.gif)

PS, milo skotkac tych samych ludzi na roznych forach (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

[quiris]

Chyba u Ciebie (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) bo u mnie zawsze Mozilla wyswietla pseudoklase hover.

No nie wyraziłem się dosyć precyzyjnie. Zgodnie z tym co napisano w oficjalnej dokumentacji trypu Quirks Mode: http://www.mozilla.org/docs/web-developer/.../quirklist.html

The :hover pseudoclass will only be applied to links, images, and form controls, unless the selector includes tag names, ids, or attributes.

Sprawdzałem stronę: http://www.quirksmode.org/css/hover.html przeglądarką:Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.7) Gecko/20040614 Firefox/0.9 i zachowuje się ona dokładnie tak jak napisał P. P. Koch:

This is a p class="test". It should become bold on hover. However, it doesn't in Mozilla 1.6 because I left the p out of the hover selector AND this page is in Quirks Mode. Mozilla 1.6 only supports .test:hover in Strict Mode.

Jak widzisz, jednak nie zawsze (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

Zalkowicie zbedny komentarz, szczegolnie ze w emulacji IE to Opera ma wieksze doswiadczenie...

Uhm... Mozilla również w tym obszarze nie chce być zbytnio do tyłu: http://gemal.dk/archives/000397.html (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

PS, milo skotkac tych samych ludzi na roznych forach (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Mnie również bardzo miło (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[Dominik]

To moze tak na koniec (tutaj tak off-topicznie nie pogadamy jak na wspomnianym forum (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) ) podsumujmy. Ja nie pisalem o wyjatkach, tylko o tym z czym mamy na codzien doczynienia. Po drugie przyklad z Mozilla jest slabiutki w kontekscie tego ze Opera juz to dawno ma i ma duzo bardziej grzeszne implementacje na swoim koncie (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) . Ale jak mowie EOT.