---
title: "mouseover och hold"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/67704-mouseover-och-hold"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "roady"
published: "2003-02-09T18:02:41.000Z"
updated: "2003-02-09T19:58:17.000Z"
replies: 10
views: 202
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/67704-mouseover-och-hold"
---

# mouseover och hold

## #1 — roady, 2003-02-09T18:02Z

Som nu när jag gör mouseover funktioner med .css så kan jag väldigt smidigt ändra en textfärg när jag tar musen över, men hur gör jag ifall jag vill att den skall behålla färgen och gå tillbaka till grundfärg först när jag tar musen över en annan länk.? (skall vara i en meny)

skall man göra någon function för det eller ?
någon som har förslag eller kanske ännu bättre, har något färdigt ?

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

## #2 — roady, 2003-02-09T18:42Z

jag skulle kunna använda mig utav onMouseOver="this.className='selected'" på varje länk för att få den ändra till ett annan stil (css), men hur gör jag för att få bort det när jag tar musen över en annan länk.

kan man inte välja flera id-taggar samtidigt ?
någon med onMouseOver="document.id\[meny\].className='link'" eller hur gör man ?

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

## #3 — Peter S, 2003-02-09T19:02Z

Så här kan du göra:

```
<script type="text/javascript">
<!--

function highlight(o){
	o.className = "selected";

	if(! focus) focus = o;
	if(! (focus == o)){
		focus.className = "normal";
		focus = o;
	}
};

//-->
</script>

...

<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
```

 :)

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

## #4 — roady, 2003-02-09T19:16Z

vet inte om jag gör fel, men de blir markerade och håller den nya stylen, men de ändras icke tillbaka =(

testade en sådan här varian.
\<a href="#" class="link" id="meny" onMouseOver="this.className='selected'"\>en l&auml;nk\</a\> &nbsp;\|\| &nbsp;
\<a href="#" class="link" onMouseOver="document.all.meny.className='link'"\>n&auml;sta l&auml;nk\</a\>

det funkar, men så fort jag lägger till fler länkar med id="meny" så slutar det att fungera!

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

## #5 — Peter S, 2003-02-09T19:18Z

Har du gjort en ".normal" i din CSS?

```
...
.normal {
     color : blue;
}
...
```

Då skall det fungera. Annars får du posta din kod.

 :)

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

## #6 — roady, 2003-02-09T19:21Z

troligtvis något som jag kört ihop, får ett felmeddelande på sidan med koden också!
något med objektet inte stödjer egenskapen eller metoden!

```
<html>
<head>
<script type="text/javascript">
<!--

function highlight(o){
	o.className = "selected";

	if(! focus) focus = o;
	if(! (focus == o)){
		focus.className = "normal";
		focus = o;
	}
};

//-->
</script>

<style type="text/css">
<!--
.link {
	color: #0033FF;
	text-decoration: underline;
}
.normal {
     color : blue;
}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
a.link:hover {
	color: #990000;
	text-decoration: none;
}
.selected {
	color: #990000;
	text-decoration: none;
}
-->
</style>
</head>
<body>

...<br>

<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
</body>
</html>
```

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

## #7 — roady, 2003-02-09T19:39Z

jag tänkte lite vidare sådär, efter som det som jag testa inte kan innehålla flera länkar med samma ID tag. kan man inte göra en loop då?

fast jag får det som vanligt inte att fungera.

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.link {
	color: #0033FF;
	text-decoration: underline;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
a.link:hover {
	color: #990000;
	text-decoration: none;
}
.selected {
	color: #990000;
	text-decoration: none;
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function deselect(){
	for(var i=1, i=3, i++){
		document.all.meny[i].className='link';
	}
}
// --> 
</script> 

</head>

<body>
<a href="#" class="link" id="meny1" onMouseOver="deselect(); this.className='selected'">en l&auml;nk</a> &nbsp;|| &nbsp;
<a href="#" class="link" id="meny2" onMouseOver="deselect(); this.className='selected'">n&auml;sta l&auml;nk</a> &nbsp;|| &nbsp;
<a href="#" class="link" id="meny3" onMouseOver="deselect(); this.className='selected'">&auml;nnu en l&auml;nk</a> 
</body>
</html>
```

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

## #8 — Peter S, 2003-02-09T19:45Z

Det var jag som klantade till det. Lägg till följande:

```
[B]var focus = null;[/B]

function highlight(){
...
```

 :)

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

## #9 — roady, 2003-02-09T19:51Z

haha... du Peter....
nu har du slarvat bort mig totalt =)

kan du inte posta hela din kod igen som den ser ut nu!

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

## #10 — Peter S, 2003-02-09T19:55Z

Sorry  :bire 

```
<script type="text/javascript">
<!--

var focus = null;

function highlight(o){
	o.className = "selected";

	if(! focus) focus = o;
	if(! (focus == o)){
		focus.className = "normal";
		focus = o;
	}
};

//-->
</script>
...
<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
```

 :)

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

## #11 — roady, 2003-02-09T19:58Z

sådär.... nu funkar det kanon.
tack så hemskt mycket för hjälpen Peter  :)

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/67704-mouseover-och-hold
