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

Question

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);
});

Answer 1

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