---
title: "onmouseover problem"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/78110-onmouseover-problem"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Masj"
published: "2003-05-26T09:08:01.000Z"
updated: "2004-06-11T12:11:50.000Z"
replies: 17
views: 663
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/javascript/78110-onmouseover-problem"
---

# onmouseover problem

## #1 — Masj, 2003-05-26T09:08Z

Jag har en sida där jag använder tables istället för bilder som knappar. men jag lyckas inte få scriptet jag använder att både byta färgen på både texten och bakgrunden när man drar musen över tabellrutan. jag lyckas att få den att endera ändra bakgrunden eller texten dock inte båda 
nån som vet någon lösning?

```
<td width="80" onmouseover="this.style.background='#666666';" onmouseout="this.style.background='#333333';" bgcolor="#333333"><center><A HREF="jagecp.htm" class="xlink"><FONT SIZE="2"><B>Main Page</b></center></a></td>
```

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

## #2 — Jojoxx, 2003-05-26T10:38Z

Välkommen till wF.

Detta var inget bra exempel :) Se längre ner i tråden.

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

## #3 — PepeJeria, 2003-05-26T10:45Z

Är det inte lite av en overkill att göra såhär? När det räcker med (eller annan variant)

```
<script type="text/javascript">
function swapColor(obj, color)
{
    obj.style.backgroundColor = color;
}
</script>
<span onMouseOver="swapColor(this, 'blue');" onMouseOut="swapColor(this, 'red');">d</span>
```

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

## #4 — dectgap, 2003-05-26T11:05Z

Jag håller med PepeJeria att det är lite onödigt att göra det mer komplicerat än vad som behövs. Dessutom får man genom Jojoxx exempel inte riktigt den effekt som jag tror att Masj önskar, eftersom du ändrar hela css-klassen, istället för att ändra i endast den cell man för musen över.

Jag hade löst det hela så här:

```
<script type="text/javascript">
function changeColors(obj, color, bgcolor){
    obj.style.color = color;
    obj.style.backgroundColor = bgcolor;
}
</script>

...

<table>
 <tr>
  <td onmouseover="changeColors(this,'#fff', '#000')" onmouseout="changeColors(this,'#000', '#fff')">bla</td>
 </tr>
 <tr>
  <td onmouseover="changeColors(this,'#fff', '#000')" onmouseout="changeColors(this,'#000', '#fff')">bla</td>
 </tr>
</table>
```

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

## #5 — Jojoxx, 2003-05-26T16:30Z

Anledningen till att jag skrev exemplet som jag gjorde och inte den enklare varianten att ändra bara bakgrundsfärgen rak av är att Masj skriver att han vill ändra **både** bakgrundsfärg och textfärg där åtminstonde delar av innehållet dessutom är länkar. Att bara ändra egenskapen color för cellen kommer inte att ändra färgen på länken.

Därför använde jag en klass istället för att hårdstyra mot ett specifikt element. :)

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

## #6 — dectgap, 2003-05-26T17:18Z

Nu förstår jag dig lite bättre, men det blir fortfarande fel eftersom du ändrar alla celler (eller andra element) som använder klassen foo.

Ett annat alternativ, som av någon anledning inte fungerar i IE och Opera:

```
<style type="text/css">
.nofocus :link{
    color: #00f;
    background-color: #fff;
}

.onfocus :link{
    color: #f00;
    background-color: #000;
}
</style>

...

<table>
 <tr>
  <td class="nofocus" onmouseover="this.className='onfocus'" onmouseout="this.className='nofocus'"><a href="#">Länk 1</a></td>
 </tr>
 <tr>
  <td class="nofocus" onmouseover="this.className='onfocus'" onmouseout="this.className='nofocus'"><a href="#">Länk 2</a></td>
 </tr>
</table>
```

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

## #7 — Jojoxx, 2003-05-26T17:59Z

> **dectgap skrev:**
>
> men det blir fortfarande fel eftersom du ändrar alla celler

Ja just det. Jag tänkte nog inte riktigt klart den där tanken :)

Här är ett annat exempel;

```
<style type="text/css">
.foo { background-color:#333333; color:white; }
.bar { background-color:#666666; color:green; }
</style>
<script language="JavaScript" type="text/javascript">
function sw(obj,cl){
	obj.className=cl;
	var children=obj.childNodes;
	for (var i=0;i<children.length;i++){
		if(children[i].tagName){ children[i].className=cl; }
	}
}

</script>
<table border="1">
<tr><td width="80" onmouseover="sw(this,'bar');" onmouseout="sw(this,'foo');" class="foo"><a href="sida.html" class="foo">Blaj</a></td></tr>
<tr><td width="80" onmouseover="sw(this,'bar');" onmouseout="sw(this,'foo');" class="foo"><a href="sida.html" class="foo">Blaj</a></td></tr>
</table>
```

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

## #8 — Peter S, 2003-05-26T17:59Z

Pseudoklassen *:link* kan bara appliceras på "a"-element, så för att koden skall fungera kan du -- från dectgaps inlägg -- plocka bort dem.

 :)

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

## #9 — Peter S, 2003-05-26T18:09Z

Johan; det skall inte vara några "snuffar" i CSS-klasserna  ;) 

 :)

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

## #10 — Jojoxx, 2003-05-26T18:27Z

Känslig liten rackare. Tack för extraparet ögon. :)

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

## #11 — dectgap, 2003-05-26T19:18Z

W3C skriver i CSS1-dokumentationen följande:

> In CSS1, anchor pseudo-classes have no effect on elements other than 'A'. Therefore, the element type can be omitted from the selector:
>
> ```
> A:link { color: red }
> :link { color: red }
> ```
>
> The two selectors above will select the same elements in CSS1.

Gäller det bara om ":link" står som ensam selector? Fast :link finns väl inte som pseudoklass till något annat element än \<a\> i CSS2 heller?
I och för sig är det skillnad mellan hur W3C skriver att det ska fungera, och hur det i praktiken fungerar i läsarna. Följande funkar nämligen inte heller i IE:

```
<style type="text/css">
.nofocus a:link{
    color: #00f;
    background-color: #fff;
}

.onfocus a:link{
    color: #f00;
    background-color: #000;
}
</style>
```

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

## #12 — Peter S, 2003-05-26T19:39Z

Jag läste lite för hastigt igenom din förra kod vilket fick mig att tro att *:link* hörde till klasserna *onfocus/nofocus*. Sorry  :r 

Koden fungerar om du i "href"-attributet skriver en obesökt adress. Annars kan man ju göra det enkelt för sig och ta bort den pseudoklassen och bara använda *a*.

 :)

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

## #13 — dectgap, 2003-05-26T19:49Z

Jag tänkte inte på att :link bara påverkar obesökta adresser.
Med ett enkelt "a" blev det urtjusigt.

Tack.

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

## #14 — Peter S, 2003-05-26T19:54Z

Även de mest triviala sakerna kan ställa till det ibland:
*:link* påverkar obesökta länkar.
*:visited* besökta länkar.... o.s.v.

 ;)

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

## #15 — Masj, 2003-05-26T20:27Z

Okej jag ger er hela koden....

Okej jag blir ganska confusad av detta bäst jag ger er hela koden
så ni ser hur det är uppbyggt.

Jag vill ändra så att sidan kan hantera att ändra färgen på texten samtidigt som bakgrunden som ni ser så fungerar bakgrunden.
Den ändrar färg när man drar musen över men dock är frågan vad jag behöver lägga till för texten... blev lite confusad av alla svar... Tack på förhand =)

```
<HTML>
<HEAD>
<TITLE>TEST PAGE</TITLE>
<style type="text/css">

.button A:link {text-decoration: none}
.button A:visited {text-decoration: none}
.button A:active {text-decoration: none}
.button A:hover {text-decoration: none; color: 000000}

.mailto A:link {text-decoration: none; color: CCCC00;}
.mailto A:visited {text-decoration: none; color: CCCC00;}
.mailto A:active {text-decoration: none; color: CCCC00;}
.mailto A:hover {text-decoration: underline; color: CCCC00;}

.normal A:link {text-decoration: none; color: 336699;}
.normal A:visited {text-decoration: none; color: 336699;}
.normal A:active {text-decoration: none; color: 336699;}
.normal A:hover {text-decoration: underline}

.xlink {cursor:default}

BODY
{ 
scrollbar-base-color: 333333; 
scrollbar-arrow-color: 000000;
scrollbar-darkshadow-color: 000000;
scrollbar-highlight-color: 666666;
scrollbar-track-color: 333333;
} 
</style>
</HEAD>
<BODY BGCOLOR="#444444" TEXT="#666666" LINK="#999999" VLINK="#999999" ALINK="#999999">
<BASEFONT FACE="arial">

	<table align="center" width="640" valign="top" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> <IMG SRC="header.jpg" width="640" height="100">
</td>
</tr>
<tr>
<td height="1" bgcolor="#444444">
</td>
</tr>
<tr>
<td>
<table align="center" width="640" border="0" cellpadding="0" cellspacing="0" bgcolor="#333333">				<tr>					
          <td bgcolor="#000000"> 
            <table align="center" width="640" height="18" border="0" cellspacing="1" cellpadding="0">
<tr>
<span class="button">
</a><A HREF="jagecp.htm">
<td width="80" onmouseover="this.style.background='#666666';" onmouseout="this.style.background='#333333';" bgcolor="#333333" font color="#000000"><center><A HREF="jagecp.htm" class="xlink"><FONT SIZE="2"><B>Main Page</b></center></a></td>
</a><A HREF="jagecp.htm">
<td width="80" onmouseover="this.style.background='#666666';" onmouseout="this.style.background='#333333';" bgcolor="#333333" font color="#000000"><center><A HREF="jagecp.htm" class="xlink"><FONT SIZE="2"><B>News</B></center></A></td>
</a><A HREF="jagecp.htm">
<td width="80" onmouseover="this.style.background='#666666';" onmouseout="this.style.background='#333333';" bgcolor="#333333"><center><A HREF="jagecp.htm" class="xlink"><FONT SIZE="2"><B>Comic</B></center></A></td>
</a><A HREF="jagecp.htm">
<td width="80" onmouseover="this.style.background='#666666';" onmouseout="this.style.background='#333333';" bgcolor="#333333"><center><A HREF="jagecp.htm" class="xlink"><FONT SIZE="2"><B>Stuff</B></center></A></td>
</a><A HREF="jagecp.htm">
<td width="80" onmouseover="this.style.background='#666666';" onmouseout="this.style.background='#333333';" bgcolor="#333333"><center><A HREF="jagecp.htm" class="xlink"><FONT SIZE="2"><B>Links</b></center></a></td>
</a><A HREF="jagecp.htm">
<td width="80" onmouseover="this.style.background='#666666';" onmouseout="this.style.background='#333333';" bgcolor="#333333"><center><A HREF="jagecp.htm" class="xlink"><FONT SIZE="2"><B>Staff</B></center></A></td>
</a><A HREF="jagecp.htm">
<td width="80" onmouseover="this.style.background='#666666';" onmouseout="this.style.background='#333333';" bgcolor="#333333"><center><A HREF="jagecp.htm" class="xlink"><FONT SIZE="2"><B>Forum</B></center></A></td>
</a><A HREF="jagecp.htm">
<td width="80" onmouseover="this.style.background='#666666';" onmouseout="this.style.background='#333333';" bgcolor="#333333"><center><A HREF="jagecp.htm" class="xlink"><FONT SIZE="2"><B>???</B></center></A></td>
</a>
</span>
</tr>
</table>
</td>
</tr>
</table>
</table>			
</table>
<table align="center" width="150" border="0" cellspacing="0" cellpadding="0">
<tr valign="top" bgcolor="#FFFFFF">
<td width="150" height="4" bgcolor="#444444">
</td>
</tr>
</td>
</table>							</table>
<td>
<table align="center" width="638" height="480" border="0" cellspacing="0" cellpadding="0">
<tr valign="top"> 
    <td> <table width="638" height="480" border="0" cellpadding="1" cellspacing="0" bgcolor="#000000">
        <tr> 
          <td><table width="638" height="480" border="0" cellpadding="1" cellspacing="0" bgcolor="#333333" background="bgr.jpg">
              <tr> 
                <td valign="top">
<span class="mailto">
<center><font size="2">-www.3v1l-l33t.tk-</center></font>
</p>
</span>         
</td>
</tr>        
</table>    
</td>
</tr>
</table>
</table>
</BODY>
</HTML>
```

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

## #16 — Jojoxx, 2003-05-27T05:47Z

```
<HTML>
<HEAD>
<TITLE>TEST PAGE</TITLE>
<style type="text/css">
BODY
{ 
scrollbar-base-color: #333333; 
scrollbar-arrow-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-highlight-color: #666666;
scrollbar-track-color: #333333;
background-color:#444444;
font-family:Arial;
} 
a { color:#999999; }
.foo { background-color:#333333; color:#999999; }
.bar { background-color:#666666; color:white; }
</style>
<script language="JavaScript" type="text/javascript">
function sw(obj,cl){
	obj.className=cl;
	var children=obj.childNodes;
	for (var i=0;i<children.length;i++){
		if(children[i].tagName){ children[i].className=cl; }
	}
}
</script>

</HEAD>
<BODY>
	<table align="center" width="640" valign="top" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> <IMG SRC="header.jpg" width="640" height="100">
</td>
</tr>
<tr>
<td height="1" bgcolor="#444444">
</td>
</tr>
<tr>
<td>
<table align="center" width="640" border="0" cellpadding="0" cellspacing="0" bgcolor="#333333">				<tr>					
          <td bgcolor="#000000"> 
            <table align="center" width="640" height="18" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="80" onmouseover="sw(this,'bar');" onmouseout="sw(this,'foo');" class="foo" align="center"><A HREF="jagecp.htm"><FONT SIZE="2"><B>Main Page</b></a></td>
<td width="80" onmouseover="sw(this,'bar');" onmouseout="sw(this,'foo');" class="foo" align="center"><A HREF="jagecp.htm"><FONT SIZE="2"><B>News</B></A></td>
<td width="80" onmouseover="sw(this,'bar');" onmouseout="sw(this,'foo');" class="foo" align="center"><A HREF="jagecp.htm"><FONT SIZE="2"><B>Comic</B></A></td>
<td width="80" onmouseover="sw(this,'bar');" onmouseout="sw(this,'foo');" class="foo" align="center"><A HREF="jagecp.htm"><FONT SIZE="2"><B>Stuff</B></A></td>
<td width="80" onmouseover="sw(this,'bar');" onmouseout="sw(this,'foo');" class="foo" align="center"><A HREF="jagecp.htm"><FONT SIZE="2"><B>Links</b></a></td>
<td width="80" onmouseover="sw(this,'bar');" onmouseout="sw(this,'foo');" class="foo" align="center"><A HREF="jagecp.htm"><FONT SIZE="2"><B>Staff</B></A></td>
<td width="80" onmouseover="sw(this,'bar');" onmouseout="sw(this,'foo');" class="foo" align="center"><A HREF="jagecp.htm"><FONT SIZE="2"><B>Forum</B></A></td>
<td width="80" onmouseover="sw(this,'bar');" onmouseout="sw(this,'foo');" class="foo" align="center"><A HREF="jagecp.htm"><FONT SIZE="2"><B>???</B></A></td>
</tr>
</table>
</td>
</tr>
</table>
</table>			
</table>
<table align="center" width="150" border="0" cellspacing="0" cellpadding="0">
<tr valign="top" bgcolor="#FFFFFF">
<td width="150" height="4" bgcolor="#444444">
</td>
</tr>
</td>
</table>							</table>
<td>
<table align="center" width="638" height="480" border="0" cellspacing="0" cellpadding="0">
<tr valign="top"> 
    <td> <table width="638" height="480" border="0" cellpadding="1" cellspacing="0" bgcolor="#000000">
        <tr> 
          <td><table width="638" height="480" border="0" cellpadding="1" cellspacing="0" bgcolor="#333333" background="bgr.jpg">
              <tr> 
                <td valign="top">
<center><font size="2">-www.3v1l-l33t.tk-</font></center>
</td>
</tr>        
</table>    
</td>
</tr>
</table>
</table>
</BODY>
</HTML>
```

Jag korrigerade några html-fel, men du bör köra sidan genom en [html-validator](http://validator.w3.org) med jämna mellanrum. E.v. fel i din html-kod kan nämligen få många "roliga" fel-effekter i dina dhtml-script.

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

## #17 — Masj, 2003-05-27T08:31Z

Tack =)

Tack för hjälpen det har löst sig nu =)

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

## #18 — Type, 2004-06-11T12:11Z

\*red
Jag gör på ett annat sätt istället...

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/78110-onmouseover-problem