Strzałka - hover Opcje

[napixowany]

Witam, jeśli byłaby taka możliwość chciałbym prosić szanownych Użytkowników o poradę. Mam mały problem dotyczący zmieniania się obrazka po najechaniu myszką. Otóż posiadam taki kod:

[HTML] pobierz, plaintext 
<div id="colMenuCenter">
<ol>
<li><a href="#">Wydarzenia</a></li>
</ol>
</div>
[HTML] pobierz, plaintext 

oraz

[CSS] pobierz, plaintext 
#colMenuCenter li { list-style-type: none; padding: 5px 0px; }
#colMenuCenter li a { width: 156px; height: 14px; margin: 0 auto; padding: 3px 10px; display: block; text-decoration: none; }
#colMenuCenter li a:hover { background-color: #352b2a; color: #feffff; text-decoration: none; }
[CSS] pobierz, plaintext 

Oprócz zmiany koloru tła zależałoby mi na tym żeby wstawić przed napisem wydarzenia taką strzałkę dla a:

(IMG:http://dps-nowawies.nstrefa.pl/li.png)

oraz dla a:hover taką:

(IMG:http://dps-nowawies.nstrefa.pl/li2.png)

Strzałki nr 2 nie widać gdyż jest białego koloru (strzałka nr1 - li.png, strzałka nr2 - li2.png). Czy jest jakaś możliwość zrobienia tego bez ustalania tła jako np. jpg z tą strzałką? Proszę o pomoc. Pozdrawiam i z góry dziękuje.

Ten post edytował napixowany 19.09.2010, 19:31:56

[devnul]

szczerze mówiąc to nie rozumiem czemu nie chcesz użyć background-image bezpośrednio na linku wystarczyło by dla obu stanów zmieniać obrazek albo z w skorzystać ze sprita i wyświetlać tylko odpowiedni fragment obrazka.

Dziękuje za kolejną wskazówkę. Devnul próbowałem Twojego sposobu jednakże przydałby mi się tylko dla li2.png, ale wtedy uzyskałbym taki efekt.

zamiast w takim razie chować i ukrywać możesz zmieniać kolor zawartości w span (jeśli to strzałka znakowa) lub tło. :before ma tą zaletę że nie mieszasz warstwy prezentacji z warstwą danych jednak nie będzie to działało poprawnie w nIEktórych przeglądarkach.