个人中心
gpt4 book ai didi

javascript - jQuery .css() 不会改变元素背景颜色

转载 作者：行者123 更新时间：2023-11-28 07:41:48 25 4
gpt4 key购买 nike

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

最佳答案

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

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

关于javascript - jQuery .css() 不会改变元素背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30914949/

25 4 0
文章推荐： javascript - 联系表单变量未从部分标记传递到 javascript
文章推荐： c++ - 相同的代码， vector 更改为 unordered_set 时出错
文章推荐： c++ - Windows服务和客户端教程？
文章推荐： php - 添加 .htaccess 尾部斜杠和 css 变得糟糕
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com