6 svar · 484 visningar · startad av bossse
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>
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...
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??
<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>
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.
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>