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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com