mouseover med fördröjning?

6 svar · 484 visningar · startad av bossse 20 juni 2006

bossseMedlem sedan juni 2003771 inlägg

Frågan20 juni 2006 21:25#1

Hur får man en fördröjning av den röda färgen på c:a 0,3 sekunder vid onmouseover i mitt exempel?

<HTML> 
<HEAD> 
<style type="text/css">
a {cursor:hand; color:red;}
div {width:12px; height:12px;line-height:0.2em;border:1px solid black;} 
</style> 
</HEAD> 
<BODY> 
<div onMouseOver="this.style.backgroundColor= 'red';" onClick="this.style.backgroundColor='blue';"></div>
<br>
<div onMouseOver="this.style.backgroundColor= 'red';" onClick="this.style.backgroundColor='blue';"></div>
</BODY> 
</HTML>

nitro2k01Medlem sedan aug. 20039 340 inlägg

20 juni 2006 21:56#2

Enkel variant:

<html>
<head>
<style type="text/css">
a {cursor:hand; color:red;}
div {width:12px; height:12px;line-height:0.2em;border:1px solid black;}
</style>
</head>
<body>
<div onmouseover="var th=this; setTimeout(function(){th.style.backgroundColor= 'red';}, 300);" onclick="this.style.backgroundColor='blue';"></div>
<br>
<div onmouseover="var th=this; setTimeout(function(){th.style.backgroundColor= 'red';}, 300);" onclick="this.style.backgroundColor='blue';"></div>
</body>
</html>

/r Blev fel där...

bossseMedlem sedan juni 2003771 inlägg

20 juni 2006 22:01#3

Nä, funkar tyvärr ej!

Funkar inte! onclick för den blå funkar fortfarande.

nitro2k01Medlem sedan aug. 20039 340 inlägg

20 juni 2006 22:30#4

Så vad vill du åstadkomma egentligen? Ska det bara gå att klicka på rutan när man inte håller musen över den? (?)
Eller vill du att rutan inte ska bli blå när man klickar på den??

nitro2k01Medlem sedan aug. 20039 340 inlägg

20 juni 2006 22:32#5


<html>
<head>
<style type="text/css">
a {cursor:hand; color:red;}
div {width:12px; height:12px;line-height:0.2em;border:1px solid black;}
</style>
</head>
<body>
<div onmouseover="var th=this; setTimeout(function(){th.style.backgroundColor= 'red';}, 300);" ></div>
<br>
<div onmouseover="var th=this; setTimeout(function(){th.style.backgroundColor= 'red';}, 300);" ></div>
</body>
</html>

bossseMedlem sedan juni 2003771 inlägg

21 juni 2006 04:43#6

Rättelse

Tack nitro2k01, nu funkar det, men tyvärr så ställde jag frågan lite felaktigt.
Om jag sveper över någon eller båda rutorna lite snabbt, t.ex mindre än 0,3 sekunder så ska aldrig onmouseover aktiveras.
Den ska bara aktiveras om jag har pekaren över rutan några tiondels sekund.

nitro2k01Medlem sedan aug. 20039 340 inlägg

21 juni 2006 09:54#7

Nu kanske det börja arta sig?

<html>
<head>
<style type="text/css">
a {cursor:hand; color:red;}
div {width:12px; height:12px;line-height:0.2em;border:1px solid black;}
</style>
</head>
<body>
<div onmouseover="var th=this; this.timeout=setTimeout(function(){th.style.backgroundColor= 'red';}, 300);"
onmouseout="clearTimeout(this.timeout); this.style.backgroundColor= 'white';"
onclick="clearTimeout(this.timeout); this.style.backgroundColor='blue';"></div>
<br>
<div onmouseover="var th=this; this.timeout=setTimeout(function(){th.style.backgroundColor= 'red';}, 300);"
onmouseout="clearTimeout(this.timeout); this.style.backgroundColor= 'white';"
onclick="clearTimeout(this.timeout); this.style.backgroundColor='blue';"></div>
</body>
</html>