jquerycsshoverintent

jquery/css: I want to change the bgcolor of row only after hovering for 1 or 2 seconds. How to achieve this?


I want to change the bg-colour of row only after hovering(meaning...I have a tool-tip on each row. I want to change the colour only after viewing a tool-tip text) for 1 or 2 seconds. How to achieve this? With my current code, the colour changes for all rows wherever my mouse-cursor touches after 1 second de

With my current code, the colour changes for all rows wherever my mouse-cursor touches after 1 second

Current code:

$('#table_id tr td').hover(function() {
    var self = this;
    setTimeout(function() {
        $(self).parent('tr').addClass('blueBgColor');
    }, 2000);
});

Solution

  • I have used setTimeout function to achieve your task...

    var timer, thisid;
     $('td').mouseenter(function(){
        thisid = $(this);
         timer = setTimeout(function(){
           $(thisid).parent('tr').addClass('blueBgColor');
        },2000);  
    }).mouseleave(function(){
        clearTimeout(timer);
    });
    

    and for your reference check this FIDDLE