Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [css]Efekt rollover w cssie
Levabul
post
Post #1





Grupa: Zarejestrowani
Postów: 197
Pomógł: 0
Dołączył: 11.07.2005

Ostrzeżenie: (0%)
-----


Próbowałem zrobić efekt rollover przy użyciu samego cssa (potrzebowałem tego do listy <ul> mającej być menu) wykabinowałem coś takiego
Kod
ul#menu
{
}
ul#menu li {
    display: inline;
    height: 38px;
    
}
ul#menu li a:hover img {
    display: none;
}
ul#menu li a img.rollover {
    display: none;
}
ul#menu li a:hover img.rollover {
    display: inline;
}
ul#menu li.active {
    position: relative;
    z-index: 2;
}
ul#menu li.active a img {
    display: none;
}
ul#menu li.active a img.rollover {
    display: inline;
}

Zastosowanie:
  1. <ul id="menu">
  2. <li>
  3. <a href="#">
  4. <img src="gfx/cos.png" alt="" />
  5. <img src="gfx/cos_a.png" alt="" class="rollover" />
  6. </a>
  7. </li>
  8. <li class="active">
  9. <a href="#">
  10. <img src="gfx/foo.png" alt="oceny" />
  11. <img src="gfx/foo_a.png" alt="" class="rollover" />
  12. </a>
  13. </li>
  14. <li>
  15. <a href="#">
  16. <img src="gfx/bar.png" alt="i" />
  17. <img src="gfx/bar_a.png" alt="" class="rollover" />
  18. </a>
  19. </li>
  20. <li>
  21. <a href="#">
  22. <img src="gfx/profil.png" alt="" />
  23. <img src="gfx/profil_a.png" alt="" class="rollover" />
  24. </a>
  25. </li>
  26. </ul>


Pod FF wszystko świetnie chodzi, natomiast pod IE już nie :/ Od 3 godzin próbuje znaleźć jakiś sposów przystosowania tego do badzIEwia, niestety bez skutku. Dlatego proszę o pomoc.

Ten post edytował Levabul 25.08.2006, 10:38:16
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 2)
php programmer
post
Post #2





Grupa: Zarejestrowani
Postów: 1 045
Pomógł: 5
Dołączył: 8.11.2004
Skąd: trójmiasto

Ostrzeżenie: (0%)
-----


Kod
.menu {
color: #eeeeee;
font-weight: bold;
font-family: arial;
font-size: 14px;
text-decoration: none;
padding-left: 47px;
padding-right: 47px;
padding-top: 2px;
padding-bottom: 2px;
}

.menu:hover {
color: navy;
background-color: #5555ff;
background-color: white;
background-image: url(images/menu1.jpg);
background-position: center;
}


efekt widać pod http://www.hydro.website.pl
Go to the top of the page
+Quote Post
Levabul
post
Post #3





Grupa: Zarejestrowani
Postów: 197
Pomógł: 0
Dołączył: 11.07.2005

Ostrzeżenie: (0%)
-----


Chyba niezauważyłeś że chodzi mi o liste. Ale problem przed chwilą rozwiązałem - okazało się że a:hover w ie standardowo ma ustawione wyświetlanie blokowe :/ przez co musiałem zmienić je na inline
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 28.09.2025 - 01:06