jQuery .css（）不會更改元素背景顏色

Question

我已經將鼠標指針替換為css元素（“ .cursory”）。 現在，這是一個綠色的圓圈。 我設置了一個計時器，用於檢測鼠標何時空閑2秒鍾。 我想在鼠標閑置時將綠色更改為紅色，但是我不知道如何使（“ cursory”）。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 個解決方案

解決方案1
2 已采納

解決方案2
-1 2015-06-18 12:13:41

解決方案3
-1 2015-06-18 12:14:14

jQuery .css（）不會更改元素背景顏色

問題描述

3 個解決方案

解決方案1 2 已采納

解決方案2 -1 2015-06-18 12:13:41

解決方案3 -1 2015-06-18 12:14:14

解決方案1
2 已采納

解決方案2
-1 2015-06-18 12:13:41

解決方案3
-1 2015-06-18 12:14:14