---
title: "Hover på TD"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/59020-hover-på-td"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "icaaq"
published: "2002-11-14T13:52:56.000Z"
updated: "2002-11-17T11:39:48.000Z"
replies: 14
views: 485
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/59020-hover-på-td"
---

# Hover på TD

## #1 — icaaq, 2002-11-14T13:52Z

Kan jag göra så här:

```
[red]
TD.one
{
      Background-color: #000000;
}
TD.one:Hover
{
     Background-color: #ffffff;
}
[/red]
```

   :q

mvh icaaq

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

## #2 — Web-Tor, 2002-11-14T13:56Z

Nja... Det funkar inte så. **hover** kan du bara använda på **a**.

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

## #3 — icaaq, 2002-11-14T14:27Z

Det blir att lösa med javascript då eller?

mvh icaaq

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

## #4 — Web-Tor, 2002-11-14T14:36Z

Du kan göra så här:

```
<table>
 <tr>
  <td onmouseover="this.style.backgroundColor='#CCCCCC'" onmouseout="this.style.backgroundColor='#FFFFFF'">text</td>
 </tr>
</table>
```

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

## #5 — icaaq, 2002-11-14T15:01Z

Japp......Där har vi den......jag ska bara lägga på några onClick så är det tårta sen.

mvh icaaq

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

## #6 — dectgap, 2002-11-14T15:32Z

Istället för att ha långa onmouseover="this.style.backgroundColor='#abc123'; this.style.color='#123abc'; this.style......."
kan du använda
onmouseover="this.className='over'" onmouseout="this.className='out'"
eller något liknande, där du anger alla grejer (färger, border o.s.v.) någon annanstans.

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

## #7 — higa, 2002-11-15T10:23Z

Det går visst att använda hover på td, dessutom kan du använda active för onclick-prylen. Fast det funkar tyvärr inte i omoderna browsers :(
För kompatibilitet med äldre browsers brukar jag skriva t ex onmouseover="eval(over)" onmouseout="eval(out)" och lägga in den kod som ska köras i variablerna over och out.

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

## #8 — icaaq, 2002-11-15T10:36Z

> **higa skrev:**
>
> Det går visst att använda hover på td, dessutom kan du använda active för onclick-prylen. Fast det funkar tyvärr inte i omoderna browsers :(
> För kompatibilitet med äldre browsers brukar jag skriva t ex onmouseover="eval(over)" onmouseout="eval(out)" och lägga in den kod som ska köras i variablerna over och out.

Skulle du vilja visa lite kod så kanske jag överväga att bli övertygad ;)

mvh icaaq

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

## #9 — Web-Tor, 2002-11-15T12:28Z

Ja, den koden skulle man vilja se. :)

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

## #10 — Palleman, 2002-11-15T12:44Z

Håller med bägge föregående talare.. :)

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

## #11 — higa, 2002-11-16T13:21Z

Visst, här är lite kod från en webbplats jag designat i tjänsten:

```
<td class="thumb" onMouseover="eval(mediaOn)" onMouseout="eval(mediaOff)" valign="middle" align="center">
                <a href="html/image1.html"><img src="nails/image1.png"></a></td>
```

```
if(document.all)
{
	mediaOn = "this.style.border = '3px outset #D7E4FD';this.style.padding = '1px';this.style.background='#82ABFD'"
	mediaOff = "this.style.border = '1px solid #000000';this.style.padding = '3px';this.style.background='url(/bilder/thumb_bg.jpg) #DDFFFF center center'"
}
else
{
	mediaOn = ""
	mediaOff = "" 
}
```

```
.thumb
{ 
	background: url('../bilder/thumb_bg.jpg') #DDFFFF center center; 
	width: 150px; height: 150px; 
	float: left;
	padding: 3px; 
	color: black;
	border: 1px solid #000000; 
	-ns4-ignore: yes;
	vertical-align: middle;
	margin: 2px;
}
.thumb:hover 
{
	background: #82ABFD; padding: 0px 2px 2px 0px;
	border-top: 3px solid #D7E4FD; border-left: 3px solid #D7E4FD; 
	border-right: 3px solid #212EFD; border-bottom: 3px solid #212EFD; 
	-moz-border-top-colors: #84ADFF #F3F7FD #D7E4FD; -moz-border-left-colors: #83ABFC #F3F7FD #D7E4FD;
	-moz-border-right-colors: #0F141E #212FFD #3A4EFD; -moz-border-bottom-colors: #000000 #212EFD #3A4EFD;
}
.thumb:active 
{
	border-top: 3px solid #5677FD; border-left: 3px solid #5677FD; 
	border-right: 3px solid #BCEDFD; border-bottom: 3px solid #BCEDFD; 
	background: #96C8FD; padding: 1px;
	-moz-border-top-colors: #A6D8FF #5677FD #79A4FD; -moz-border-left-colors: #A6D8FF #5677FD #7AA3FD;
	-moz-border-right-colors: #8BB5FF #BCEDFD #A7D9FD; -moz-border-bottom-colors: #8BB5FF #BCEDFD #A7D9FD;
}
```

Anledningen till att mediaOn och mediaOff enbart får värden om man kör Internet Explorer (document.all) är att moderna Gecko-baserade browsers inte behöver det då dom stödjer hover på annat än A-taggar, samt att stenåldersbrowsers som t ex Netscape 4 ändå inte klarar ens mouse events på annat än A-taggar.

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

## #12 — Web-Tor, 2002-11-16T16:42Z

Jag hänger faktiskt inte med i ditt exempel higa. :l

Du menar att det är skulle funka eller:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style type="text/css">
<!--
.test {
	background: #999;
}

.test:hover {
	background: #555;
}

.test:active {
	background: #111;
}
-->
</style>

</head>
<body>

<table>
	<tr>
		<td class="test">test</td>
	</tr>
</table>

</body>
</html>
```

Koden går ju igenom validatorn men jag kan inte få det att funka i någon webbläsare.

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

## #13 — erre, 2002-11-16T17:27Z

web-tor: Fungerar finfint i Mozilla kan jag meddela. :)

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

## #14 — Web-Tor, 2002-11-16T22:28Z

För mig funkar det varken i Netscape 6 eller Mozilla 0.9. :l

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

## #15 — higa, 2002-11-17T11:39Z

Okej, mitt exempel var kanske lite overkill, men hover på td(liksom dom flesta andra taggar, med undantag för t ex script, head och liknande) fungerar som sagt i Mozilla och i andra browsers som följer standarden.
Mozilla 0.9 har ju ca 1½ år på nacken, så jag minns inte om den stödde Hover fullt ut, eller om den liksom Internet Explorer bara stödde det på A-taggar.

Web-tors exempel funkar också för mig i Mozilla 1.2b

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/59020-hover-på-td