CSS rollover

Det finns många sätt. Ska bilden vara en länk också?

<a href="dinlank.html" id="rollover">Klicka här</a>

<style type="text/css" media="screen">
#rollover {
            width: 100px;
            height: 100px;
            display: block;
            background-image: url("bild1.jpg");
            text-indent: -10000px;
}

#rollover:hover {
            background-image: url("bild2.jpg");
}
</style>

Annars går det bra att lösa med javascript.

Det där var ju faktiskt smidigt, tack för den! :) Jag märkte dock att det uppstod ett streck i FF trots "text-indent"-prylen, men jag använde istället "text-decoration:none" och la in en & nbsp; i länken istället. Kanon!

Jag hade lagt texten inom en <span> och sedan satt

[red]
#rollover span
{
display: none;
}
[/red]

På så sätt kommer de som surfar utan css att se länken. Dock inte de som har bilder avslaget, men de såg ju inte din länk tidigare heller....

mv icaaq

<a href="#">foo<span></span></a>

a, a span { display:block; width:100px; height:50px; }
a { position:relative; overflow:hidden; }
a span { position:absolute; top:0; left:0; background:url(foo) left bottom; }
a:hover span { background-position:left top; }

Då ser man texten i scenariot CSS på, bilder av.

Hmm...det verkar funka lite halvtaskigt i IE. :(

Jag upptäckte också linjen i Firefox nu. Den går enkelt att plocka bort med en overflow: hidden;

<a href="dinlank.html" id="rollover">Klicka här</a>

<style type="text/css" media="screen">
#rollover {
            width: 100px;
            height: 100px;
            display: block;
            background-image: url("bild1.jpg");
            text-indent: -10000px;
            overflow: hidden;
}

#rollover:hover {
            background-image: url("bild2.jpg");
}
</style>

Att lägga in en massa extra span är onödigt i det här fallet.