在 jQuery 中停止悬停后，如何保持悬停 3 秒？

Question

What this code does is when you hover over an item in a list, it changes to red, and displays another list below. If you are no longer hovering over any elements, the goal is to have the latest thing you hovered over stay there for 3 seconds before it's cleared.

$('#stockList li').hover(
            function () {
                    $(this).css({ color: 'red' }); //mouseover
                    if ($(this).text() == symbol) {

                        $('#stockInfo').append('<div><ol><li>' + "Company = " + company + '</li><br/><li>' + "Market = " + market + '</li><br/><li>' + "Sector = " + sector + '</li><br/><li>' + "Price = " + price + '</li><br/><li>' + "Year Range = " + low + " " + high + '</li><br/><li>' + "Dividend = " + amount + " " + yieldx + " " + frequency + '</li></ol><br/></div>');
                    }
                },

            function () {
                $(this).css({ color: 'navy' }); // mouseout
                $('#stockInfo').empty();
            }
        );

Answer 1

Just add delay to it:

$(this).delay(3000).css({ color: 'navy' }); // mouseout
$('#stockInfo').empty();

Remember that javascript time works with miliseconds, so 3 seconds is 3000 miliseconds in javascript.

See the jQuery docs on delay here .

Answer 2

Hover effect remains their until you take mouse cursor off the element

jsFiddle

You can do something like this :

var timeout;
    $('#stockList li').hover(
           function () {
              clearTimeout(timeout);// this will take care if user re-hover over the element
              $(this).css({ color: 'red' }); //mouseover
                  if ($(this).text() == symbol) {        
                     $('#stockInfo').append('<div><ol><li>' + "Company = " + company + '</li><br/><li>' + "Market = " + market + '</li><br/><li>' + "Sector = " + sector + '</li><br/><li>' + "Price = " + price + '</li><br/><li>' + "Year Range = " + low + " " + high + '</li><br/><li>' + "Dividend = " + amount + " " + yieldx + " " + frequency + '</li></ol><br/></div>');
                        }
                    },

                function () {
               timeout=  setTimeout(function(){
                    $('#stockList li').css({ color: 'navy' }); // mouseout
                    $('#stockInfo').empty();
                  },3000);
                }
            );

Answer 3

$('#stockList li').hover(
            function () {
                    $(this).css({ color: 'red' }); //mouseover
                    if ($(this).text() == symbol) {

                        $('#stockInfo').append('<div><ol><li>' + "Company = " + company + '</li><br/><li>' + "Market = " + market + '</li><br/><li>' + "Sector = " + sector + '</li><br/><li>' + "Price = " + price + '</li><br/><li>' + "Year Range = " + low + " " + high + '</li><br/><li>' + "Dividend = " + amount + " " + yieldx + " " + frequency + '</li></ol><br/></div>');
                    }
                },

            function () {
                setTimeOut(function(){
                    $(this).css({ color: 'navy' }); // mouseout
                    $('#stockInfo').children('div').remove();
                },3000); // Disappear after 3000 ms or 3 seconds
            }
);