How to set mouseover display delay

Question

I'm using mouseover effect on a table list to show content of lesson on hover. However, as it's in table, it's "changing too fast", when going from one row to another, that is why I would like to put some delay on the mouseover effect.

My code currently looks like this :

onmouseover="show('id')" onmouseout="hide('id')">

How to make a small delay ?

Answer 1

A non jQuery solution, for reference:

<script>

    var show=function(x)
    {
        setTimeout(
            function()
            {
                do the stuff...
            },
            200
        );
    };

    var hide=function(x)
    {
        setTimeout(
            function()
            {
                do the other stuff...
            },
            200
        );
    };

</script>
<div onmouseover="show('id')"  onmouseout="show('id')"></div>

Basically, I've defined show and hide as functions which create anonymous functions that do the actual showing and hiding and then run them after a 200ms delay using setTimeout .

Answer 2

An awesome plugin by brain if you use jquery to control your hover actions and timers. http://cherne.net/brian/resources/jquery.hoverIntent.html

or you can just use vannilla javascript to set timers.

Answer 3

If you are working with jQuery's show and hide methods you can simply put the desired duration in ms between the brackets:

<div onmouseover="$('#id').show(600)" onmouseout="$('#id').hide(600)">
    some content
</div>