0

特定の ID を持つ特定の html 要素を「ホバー」すると、id="HighlightCustomerName"その「ホバー」を 2 秒以上保持した後にのみ、関数がclass="highlighted"別のクラスを持つ HTML 要素にクラスを一時的に適用するスクリプトを作成しようとしています。 class="2Bhighlighted".

以下を参照してください。動作しませんが、私がやろうとしていることを示していると思います:

HTML:

<span id="HighlightCustomerName">John Doe</span>
<span class="2Bhighlighted">John Doe</span>

Jクエリ: 

   $(document).ajaxSuccess(function () {
             $(".#HighlightCustomerName").hover(function () {
                  $(".2Bhighlighted").delay(2000).addclass("highlighting")
             });)
             if ( $(".2Bhighlighted").hasClass("highlighting"))
                  {
                       $(".2Bhighlighted").addClass("highlighted")
                  }
                  else{
                       $(".highlighted").removeclass("highlighted") 
                  }
       });

CSS:

highlighted {bakcground-color: yellow!important;}

これはこれにアプローチする良い方法ですか？誰かがこれを行うためのより良い方法を持っていますか? もうすぐです

4

4 に答える 4

0 
var highlightTimeout;
$("#HighlightCustomerName").hover(function () {
    highlightTimeout=setTimeout(function(){
        $(".2Bhighlighted").addclass("highlighting");
    }, 2000);
}, function(){
   $(".highlighted").removeclass("highlighted"); // no point checking, just remove it
   clearTimeout(highlightTimeout); // this prevents it from happening
});

また、セレクター.#HighlightCustomerNameが間違っていることに注意してください

于 2013-10-20T20:06:18.687 に答える
0 
var element = $('#hoverMe');

hoverChange(element, function() {
    element.addClass('red');
});

function hoverChange(element, fn) {

    var timer = null;

    element.mouseenter(function() {
        timer = setTimeout(function() {
            fn();
        }, 2000)
    });

    element.mouseout(function() {
        clearTimeout(timer);        
    });

}

ここで試してください：

http://jsfiddle.net/GwADf/

于 2013-10-20T20:07:18.243 に答える
0

これを機能させるには、タイマーを設定およびクリアする必要があります。

  • ホバーを開始したら、タイマーを 2 秒に設定します。
  • ホバリングを停止したら、現在実行中のタイマーをすべてクリアします。
  • ホバリングを停止せずに 2 秒が経過すると、タイマーが起動します
  • その後、一時クラスを追加できます。
  • 一定期間後に一時クラスを削除する場合は、一時クラスを削除するために別の操作を行いsetTimeout()ます

いくつかの説明コメントを含むコードは次のとおりです。

var timer;
$("#HighlightCustomerName").hover(function () {
    // if a timer was already running, clear it so we never have multiple ones
    clearTimeout(timer);
    // set a timer for 2 seconds
    timer = setTimeout(function() {
        // we've been hovering for 2 seconds
        // add your class here
        $(".2Bhighlighted").addClass("highlighting");
        // then remove the class 5 seconds later
        setTimeout(function() {
            $(".2Bhighlighted").removeClass("highlighting");
        }, 5000);
    }, 2000);
}, function() {
    // if we stop hovering, clear the timer
    clearTimeout(timer);
});

コードには他にも多くのエラーがありました。

  1. ".#HighlightCustomerName"見た目が正しくないセレクターがありました。.を使用してクラスまたは を使用して ID を照会しています#が、両方ではありません。

  2. addClass()andの大文字と小文字の使い方がremoveClass()正しくありません。

于 2013-10-20T20:07:21.930 に答える
0

css3 トランジションを使用して、jquery を完全に避けることができます:-

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Answer</title>
    <script>
        function changeStyle(className, colorName) {
            var element = document.getElementsByClassName(className);
            element[0].style.transition = "background 1.0s linear 2.0s";
            element[0].style.background = colorName;
        }
    </script>
</head>
<body>
    <span id="HighlightCustomerName"
          onmouseover="changeStyle('2Bhighlighted','yellow');"
          onmouseout="changeStyle('2Bhighlighted','white');">John Doe</span>
    <span class="2Bhighlighted">John Doe</span>
</body>
</html>
于 2013-10-20T20:45:05.370 に答える