webForumDet fria alternativet

a:hover - background-image

HTML & CSSur HTML, XHTML & CSS

9 svar · 577 visningar · startad av rundberg

Medlem sedan mars 2007116 inlägg
Frågan#1

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

Medlem sedan mars 2007116 inlägg
#2

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

Medlem sedan okt. 20001 285 inlägg
#3

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

Medlem sedan nov. 20051 596 inlägg
#4

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.

Medlem sedan juni 20014 421 inlägg
#5

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

Medlem sedan mars 2007116 inlägg
#6

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

Medlem sedan mars 2007116 inlägg
#7

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

Medlem sedan juni 20019 519 inlägg
#8
li a {
width:150px;
display:block;
}

Kanske?

Medlem sedan mars 2007116 inlägg
#9

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

Medlem sedan mars 2007116 inlägg
#10

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

140 ms totalt · 3 externa anrop · v20260731065814-full.b746b907
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
136 ms — hämta tråd, inlägg och bilagor (db)