CODEWITHSUNDEEP
javascriptdelaydetectiononmouseover
user3563888
user3563888

Reputation: 21

How to set mouseover display delay

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 ?

Upvotes: 2

Views: 1293

Answers (3)

mindoftea
mindoftea

Reputation: 836

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.

Upvotes: 1

Marcel Binder
Marcel Binder

Reputation: 166

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>

Upvotes: 0

РАВИ
РАВИ

Reputation: 12155

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.

Upvotes: 0

Related Questions