mouseover och hold

10 svar · 199 visningar · startad av roady 9 feb. 2003

roadyMedlem sedan jan. 2002473 inlägg

Frågan9 feb. 2003 18:02#1

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 ?

roadyMedlem sedan jan. 2002473 inlägg

9 feb. 2003 18:42#2

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 ?

Peter SMedlem sedan dec. 20025 483 inlägg

9 feb. 2003 19:02#3

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>

roadyMedlem sedan jan. 2002473 inlägg

9 feb. 2003 19:16#4

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änk</a> ||
<a href="#" class="link" onMouseOver="document.all.meny.className='link'">nästa länk</a>

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

Peter SMedlem sedan dec. 20025 483 inlägg

9 feb. 2003 19:18#5

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

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

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

roadyMedlem sedan jan. 2002473 inlägg

9 feb. 2003 19:21#6

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>

roadyMedlem sedan jan. 2002473 inlägg

9 feb. 2003 19:39#7

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>

Peter SMedlem sedan dec. 20025 483 inlägg

9 feb. 2003 19:45#8

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

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

function highlight(){
...

roadyMedlem sedan jan. 2002473 inlägg

9 feb. 2003 19:51#9

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

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

Peter SMedlem sedan dec. 20025 483 inlägg

9 feb. 2003 19:55#10

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>

roadyMedlem sedan jan. 2002473 inlägg

9 feb. 2003 19:58#11

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