0

このコードが行うことは、リスト内の項目にカーソルを合わせると、赤に変わり、下に別のリストが表示されます。どの要素にもカーソルを合わせていない場合、最後にカーソルを合わせたものをクリアする前に 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();
            }
        );
4

3 に答える 3

0

それに追加delayするだけです：

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

JavaScript の時間はミリ秒で機能することに注意してください。したがって、3 秒は JavaScript では 3000 ミリ秒です。

ここで、遅延に関する jQuery ドキュメントを参照してください。

于 2013-03-29T23:07:07.653 に答える
0

ホバー効果は、マウスカーソルを要素から離すまでそのままです

jsフィドル

次のようなことができます：

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);
                }
            );
于 2013-03-29T23:07:46.920 に答える
0 
$('#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
            }
);
于 2013-03-29T23:07:57.957 に答える