---
title: "CSS rollover"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/130181-css-rollover"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Skarre"
published: "2005-06-17T10:28:10.000Z"
updated: "2005-06-21T19:40:01.000Z"
replies: 5
views: 289
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/130181-css-rollover"
---

# CSS rollover

## #1 — Skarre, 2005-06-17T10:28Z

Kort och gott: hur skapar man en "image rollover" med CSS och semantiskt korrekt XHTML? Jag har googlat men inte hittat något exempel på en sådan.

Tack på förhand!

Permalänk: https://www.webforum.nu/p/130181

## #2 — Gislaved, 2005-06-17T10:41Z

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.

Permalänk: https://www.webforum.nu/p/1631511

## #3 — Skarre, 2005-06-17T10:54Z

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!

Permalänk: https://www.webforum.nu/p/1631515

## #4 — icaaq, 2005-06-17T11:12Z

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

Permalänk: https://www.webforum.nu/p/1631524

## #5 — zcorpan, 2005-06-17T11:45Z

```
<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. :(

Permalänk: https://www.webforum.nu/p/1631532

## #6 — Gislaved, 2005-06-21T19:40Z

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.

Permalänk: https://www.webforum.nu/p/1632824

---

Tråden på webben: https://www.webforum.nu/amne/html-css/130181-css-rollover