Question

我用css元素（“.cursory”）替换了我的鼠标指针。现在它是一个小绿圈。我已经设置了一个定时器，可以检测鼠标何时空闲2秒钟。我想在鼠标空闲时将绿色更改为红色，但我无法弄清楚如何获取（“粗略”）.css（...）工作。下面是我的代码，问题.css（）在goInactive函数中：

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><!--this is the jQuery document link-->

<script>
// this is where jQuery functions go

//TESTING IF THE UI IS IDLE
    var TimeoutID;

    function inputdetect() {
        // attaches event handler to specified event
        // takes event as string, function to run, and optional boolean
        // to indicate when the event propogates
        // these are false, so events "bubble up"
        this.addEventListener("mousemove",resetTimer,false);
        this.addEventListener("mousedown",resetTimer,false);
        this.addEventListener("mousewheel",resetTimer,false);
        this.addEventListener("keypress",resetTimer,false);
        this.addEventListener("touchmove",resetTimer,false);
        this.addEventListener("DOMmousescroll",resetTimer,false);
        this.addEventListener("MSpointermove",resetTimer,false);

        startTimer();
    }

    inputdetect();

    function startTimer() {
        //waits two seconds before calling inactive
        TimeoutID = window.setTimeout(goInactive,2000); // does it need to take the window variable??

    }

    function resetTimer(e) {
        window.clearTimeout(TimeoutID);
        goActive();

    }

    function goActive() {

        //what happens when the UI is not idle

        $('p').text("The UI is not idle.");
        startTimer();
    }

    function goInactive() {

        $('p').text("The UI is idle.");
        // REPLACING CURSOR WHEN UI IS IDLE
        //this part won't work
        $('cursory').css("background-color","red");


    }

// THIS changes the pointer to a css element
 $(document).ready(function() { 

      $(document).on('mousemove', function(e) {
            $('.cursory').css({
                left: e.pageX,
                top: e.pageY
            });
        });

});

</script>

</head>
<style>
/*this is where CSS styling goes*/

    html {
      cursor: none;

    }
    .cursory {

      height: 10px;
      width: 10px;
      border-radius: 100%;
      background-color: green;
      position: relative;

    }


</style>

<body>
<div class = "cursory"></div>
<!--this is where the HTML will go*/-->
<p>hello</p>

Answer 1

cursory是元素的类，使用类选择器.className

$('.cursory').css("background-color","red");

Answer 2

可能缺少问题“。” ......

$('.cursory').css("background-color","red");

关于选择器的一篇小文章： http://www.w3schools.com/jquery/jquery_ref_selectors.asp

Answer 3

根据您上面的代码，看起来您没有在jQuery调用中使用适当的CSS选择器。

更改此

$('cursory').css("background-color","red");

到

$('.cursory').css("background-color","red");

jQuery .css（）不会改变元素背景颜色

3 个答案: