0

我正在尝试创建一个脚本，当我“悬停”具有特定 ID 的特定 html 元素时id="HighlightCustomerName"，只有在将该“悬停”保持 2 秒或更长时间后，函数才会暂时将一个类class="highlighted"应用于具有另一个类的 HTML 元素class="2Bhighlighted".

见下文，它不起作用，但我认为它说明了我试图做的事情：

HTML：

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

查询： 

   $(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"看起来不正确的选择器。您正在查询带有 a 的类.或带有 的 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 回答