jQuery .css(） 不会更改元素背景颜色

jQuery .css() won't change element background color

本文关键字：元素 背景 颜色 css jQuery      更新时间：2023-09-26

我已经用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>

cursory是

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

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

可能缺少问题"." 

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

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

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

更改此内容

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

自

$('.cursory').css("background-color","red");
相关文章：