a:hover - background-image

Jag försöker få till en länk som när man hovrar över den så skall en bakgrundsbild dyka upp bakom själva länken. Varför fungerar inte denna kod som jag har i min css mall

a.1:hover {background-image: url(bilder/1.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: left top;
}

Motsvarande html kod

<a class="1" href="#">LÄNK 1</a><br>

borde inte nu min "bild1" visas bakom länken när jag hovrar över den?

//Rundberg

Jag fick det att fungera om jag tog bort "1" ur a.1:hover och då bara hade <a href...
men jgah ar några andra funderingar. Kan man ställa in hur mycket av bilden som skall visas?, jag vill att resten av bilden skall visas "utanför" länken om man säger så. Som jag har det nu så har jagh en bild som är rätt höjd med 180px bred, vilket är tre gånger så brett som min länk text. Kan man göra så att alla dessa 180 px av bilden visas?

Sen skulle jag villa ha olika bilder för olika länkar så kan man inte fixa det med typ a.1:hover, a.2:hover o.s.v.?

Byt ut klassnamnet till lank1 istället för bara 1

Jagtror en bättre lösning är att placera bilden i li, du har väl länken i någon form av lista och sedan byter ut din
a.1:hover{
till
li a:hover{
och sätter width på den.

Ett classnamn får inte börja på en siffra.

Marker tråden som löst också, och välj rätt svar den här gången. Inte som du gjorde i javascripttråden:

http://www.webforum.nu/showthread.php?p=1313540#post1313540

Okej. Tack för alla svar. Skall testa büde Fuels och tantens lösningar och se vad som fungerar bäst. Troode inte det spelade sa stor roll vilket svar man markerade som löst, men nu vet jag och slall göra rätt i fortsättningen

Jag har fortfarande problem med att få det att fungera.
Min css ser nu ut så här:

li {
   list-style-type: none;
   width: 150px;
   margin: 5px 0px 5px 0px;
   border: 1px solid white;
}

li a.lank1:hover {
   background-image: url(bilder/1.gif);
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-position: left top;
   width: 150px;
}

Och min html fil ser ut så här:

<u1>
<li><a class="lank1" href="#">LÄNK 1</a></li>
<li>LÄNK 2</li>
<li>LÄNK 3</li>
<li>LÄNK 4</li>
<li>LÄNK 5</li>
<li>LÄNK 6</li>
<li>LÄNK 7</li>
<li>LÄNK 8</li>
</u1>

Men fortfarande så sträcker sig inte bilden ut över hela "länkområdet" (150px) utan bara så långt länktexten sträcker sig. Jag måste ha olika <a classar> för jag vill ha olika blider på olika länkar. Nån idé om vad som kan vara fel?

//Rundberg

li a {
width:150px;
display:block;
}

Kanske?

Jag löste det själv med display:block;

mm, takc så mycket. _Han inte uppdatera sidan innan jag skickade.