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:



oraz dla a:hover taką:



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

[Blame]

Możesz skorzystać z pseudoelementu :before, ale nie obsługują go starsze przeglądarki

Ten post edytował Blame 19.09.2010, 19:31:51

[napixowany]

Rozumiem. A czy mógłbyś mi doradzić w jaki sposób go wykorzystać tak, aby ta strzałka miała dwa kolory? Brązowy i po najechaniu biały?

[devnul]

nie wiem czy o to Ci chodzi ale dodaj sobie dodatkowy tag - np spam czy coś w obrębie linku

[HTML] pobierz, plaintext 
<a href="#"><span>strzałka</span>jakiś tekst</a>
[HTML] pobierz, plaintext 

i następnie w stylach włącz jego wyświetlanie dopiero po najechaniu na odnośnik

[CSS] pobierz, plaintext 
a span {
visibility: hidden;
}
a:hover span {
visibility: visible;
}
[CSS] pobierz, plaintext 

Ten post edytował devnul 19.09.2010, 20:41:20

[napixowany]

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.

Przed najechaniem:
puste pole Wydarzenia

Po najechaniu:
biała strzałka Wydarzenia

A mi chodzi o uzyskanie takiego efektu. Przed najechaniem
brązowa strzałka (li.png) Wydarzenia

Po najechaniu:
biała strzałka (li2.png) Wydarzenia



Problem został rozwiązany przy użyciu :before. Gorące podziękowania dla Was, a w szczególności dla Blame.

[tr@k]

Dla a dajesz

Kod

background: url(li.png) no-repeat left

ustawiasz odpowiedni padding-left, żeby tekst nie nachodził na strzałkę. W a:hover zmieniasz obraz na li2.png

[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.