Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #16445 > unrolled thread

Persistent onmouseout/hover

Back to article view | Back to comp.lang.javascript

Contents

  Persistent onmouseout/hover joe <mt@invalid.com> - 2012-10-07 14:25 +0300
    Re: Persistent onmouseout/hover Luuk <luuk@invalid.lan> - 2012-10-07 15:40 +0200
      Re: Persistent onmouseout/hover joe <mt@invalid.com> - 2012-10-07 19:15 +0300
        Re: Persistent onmouseout/hover Luuk <luuk@invalid.lan> - 2012-10-07 19:00 +0200
    Re: Persistent onmouseout/hover Danny <dann90038@gmail.com> - 2012-10-07 12:00 -0700

#16445 — Persistent onmouseout/hover

I have a sidebarmenu vertical menu. When mouse is over a selection the selection
changes color. When mouse leaves the selection the color changes back to default
immeadiately.

I'd like the selecttion color to stay a bit longer on the screen when mouse moves
out (ie onmouseleave). How do I do that?

[toc] | [next] | [standalone]

#16447

On 07-10-2012 13:25, joe wrote:
> I have a sidebarmenu vertical menu. When mouse is over a selection the selection
> changes color. When mouse leaves the selection the color changes back to default
> immeadiately.
>
> I'd like the selecttion color to stay a bit longer on the screen when mouse moves
> out (ie onmouseleave). How do I do that?
>

something like this (sorry for the linenumers ;):
   1 <html>
   2 <head>
   3 <title>onmouseout</title>
   4 <script type="text/javascript" >
   5 function one(t) {
   6 t.style.color = 'red';
   7 }
   8 function two(t) {
   9 setInterval(function(){myTimer(t)},3000);
  10 }
  11 function myTimer(t) {
  12 t.style.color = 'black';
  13 }
  14 </script>
  15 </head>
  16 <body>
  17 <a href="" onmousemove="one(this);" 
onmouseout="two(this);">testlink</a><br>
  18 </body>
  19 </html>

[toc] | [prev] | [next] | [standalone]

#16448

Here's  my test sample. The html below display's some text in a red box. When
mouse move over the box a blue line is displayed around the red box.
When mouse exit's the box the blue line disappears. 

If I try to set a time for removal of the blue line I get nothing: the blue line
stays there.


<html><head>
<script type="text/javascript">
function timeout_trigger(test) {
test.style.border = "";
}
    
function OnMouseIn (elem) {
elem.style.border = "2px solid blue";
}

function OnMouseOut (elem) {
//setTimeout('timeout_trigger(elem)', 500);   //this does not work
timeout_trigger(elem);                        //this works
}
</script></head>
<body>
<div style="background-color:red; width:200px" onmouseover="OnMouseIn(this)"
onmouseout="OnMouseOut(this)">
Move your mouse pointer into and out of this element!
</div></body></html>


Luuk <luuk@invalid.lan> wrote:

>On 07-10-2012 13:25, joe wrote:
>> I have a sidebarmenu vertical menu. When mouse is over a selection the selection
>> changes color. When mouse leaves the selection the color changes back to default
>> immeadiately.
>>
>> I'd like the selecttion color to stay a bit longer on the screen when mouse moves
>> out (ie onmouseleave). How do I do that?
>>
>
>something like this (sorry for the linenumers ;):
>   1 <html>
>   2 <head>
>   3 <title>onmouseout</title>
>   4 <script type="text/javascript" >
>   5 function one(t) {
>   6 t.style.color = 'red';
>   7 }
>   8 function two(t) {
>   9 setInterval(function(){myTimer(t)},3000);
>  10 }
>  11 function myTimer(t) {
>  12 t.style.color = 'black';
>  13 }
>  14 </script>
>  15 </head>
>  16 <body>
>  17 <a href="" onmousemove="one(this);" 
>onmouseout="two(this);">testlink</a><br>
>  18 </body>
>  19 </html>

[toc] | [prev] | [next] | [standalone]

#16450

On 07-10-2012 18:15, joe wrote:
> Here's  my test sample. The html below display's some text in a red box. When
> mouse move over the box a blue line is displayed around the red box.
> When mouse exit's the box the blue line disappears.
>
> If I try to set a time for removal of the blue line I get nothing: the blue line
> stays there.
>
>
> <html><head>
> <script type="text/javascript">
> function timeout_trigger(test) {
> test.style.border = "";
> }
>
> function OnMouseIn (elem) {
> elem.style.border = "2px solid blue";
> }
>
> function OnMouseOut (elem) {
> //setTimeout('timeout_trigger(elem)', 500);   //this does not work
> timeout_trigger(elem);                        //this works
> }


function OnMouseOut (elem) {
    //setTimeout('timeout_trigger(elem)', 500);   //this does not work
    //timeout_trigger(elem);                        //this works
    setTimeout(function() { timeout_trigger(elem) }, 500);
}


There should not be any single quoot in de first parameter of setTimeout 
(or setInterval() )......

> </script></head>
> <body>
> <div style="background-color:red; width:200px" onmouseover="OnMouseIn(this)"
> onmouseout="OnMouseOut(this)">
> Move your mouse pointer into and out of this element!
> </div></body></html>

[toc] | [prev] | [next] | [standalone]

#16453

can you post a mock up or the actual page url for us to see what you need?  I don't see the need thus far, maybe it's just me, seems to me you're losing focus of the Menu element prematurely, but that may just be a CSS issue, the way your markup is done, the container for the Menu element might be too narrow or small, and thus you're experiencing the mouse prematurely leaving the object.

If that were to be the case, then all you'd need is expanding your Element boundaries, or set a :hover pseudo-class on a different ancestor/parent for it.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web