jquery - 在 jQuery 中停止悬停后，如何保持悬停效果 3 秒？

Question

此代码的作用是，当您将鼠标悬停在列表中的某个项目上时，它会变为红色，并在下方显示另一个列表。如果您不再将鼠标悬停在任何元素上，则目标是让您悬停的最新事物在其被清除之前停留 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 () {
                $(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
            }
);