Forum PHP.pl > [css]Efekt rollover w cssie

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [css]Efekt rollover w cssie

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

Levabul

25.08.2006, 10:37:36

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:

[HTML] pobierz, plaintext 
<ul id="menu">
<li>
<a href="#">
<img src="gfx/cos.png" alt="" />
<img src="gfx/cos_a.png" alt="" class="rollover" />
</a>
</li>
<li class="active">
<a href="#">
<img src="gfx/foo.png" alt="oceny" />
<img src="gfx/foo_a.png" alt="" class="rollover" />
</a>
</li>
<li>
<a href="#">
<img src="gfx/bar.png" alt="i" />
<img src="gfx/bar_a.png" alt="" class="rollover" />
</a>
</li>
<li>
<a href="#">
<img src="gfx/profil.png" alt="" />
<img src="gfx/profil_a.png" alt="" class="rollover" />
</a>
</li>
</ul>
[HTML] pobierz, plaintext

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.

php programmer

25.08.2006, 11:16:37

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

Levabul

25.08.2006, 11:33:48

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

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.