Forum PHP.pl > Zmiana tla div po najechaniu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Zmiana tla div po najechaniu

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

wojtek

24.06.2004, 16:14:23

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

25.06.2004, 14:14:37

Cytat(wojtek @ 2004-06-24 17:14:23)

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.

wojtek

25.06.2004, 14:55:05

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

25.06.2004, 16:35:39

Cytat(quiris @ 2004-06-25 15:14:37)

Podobnie zachowuje się Mozilla w trybie Quirks Mode

Chyba u Ciebie

bo u mnie zawsze Mozilla wyswietla pseudoklase hover.

Cytat(quiris @ 2004-06-25 15:14:37)

(emuluje ograniczenie MSIE).

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

PS, milo skotkac tych samych ludzi na roznych forach

quiris

26.06.2004, 19:35:33

Cytat

Chyba u Ciebie

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

Cytat

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:

Cytat

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

Cytat

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

Cytat

PS, milo skotkac tych samych ludzi na roznych forach

Mnie również bardzo miło

Dominik

27.06.2004, 01:18:11

To moze tak na koniec (tutaj tak off-topicznie nie pogadamy jak na wspomnianym forum

) 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

. Ale jak mowie EOT.

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.