Javascript css（）赢了'；不改变元素背景色
我用css元素（“.cursory”）替换了鼠标指针。现在是一个绿色的小圆圈。我安装了一个计时器，可以检测鼠标何时空闲2秒。我想在鼠标空闲时将绿色更改为红色，但我不知道如何使（“cursory”）.css（…）工作。下面是我的代码，问题是.css（）在goInactive函数中：Javascript css（）赢了'；不改变元素背景色,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我用css元素（“.cursory”）替换了鼠标指针。现在是一个绿色的小圆圈。我安装了一个计时器，可以检测鼠标何时空闲2秒。我想在鼠标空闲时将绿色更改为红色，但我不知道如何使（“cursory”）.css（…）工作。下面是我的代码，问题是.css（）在goInactive函数中： <!DOCTYPE html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.
<!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>
//这就是jQuery函数的用途
//测试UI是否空闲
var-TimeoutID；
函数inputdetect（）{
//将事件处理程序附加到指定的事件
//将事件作为字符串、要运行的函数和可选布尔值
//指示事件何时发生
//这些都是假的，所以事件“冒泡”
addEventListener（“mousemove”，resetTimer，false）；
这个.addEventListener（“mousedown”，resetTimer，false）；
此.addEventListener（“鼠标滚轮”，重置计时器，false）；
此.addEventListener（“按键”，重置计时器，错误）；
此.addEventListener（“touchmove”，resetTimer，false）；
这个.addEventListener（“DOMmousescroll”，resetTimer，false）；
此.addEventListener（“MSpointermove”，resetTimer，false）；
startTimer（）；
}
inputdetect（）；
函数startTimer（）{
//在调用inactive之前等待两秒钟
TimeoutID=window.setTimeout（goInactive，2000）；//是否需要获取window变量？？
}
功能重置计时器（e）{
clearTimeout（TimeoutID）；
目的性（）；
}
函数goActive（）{
//当UI不空闲时会发生什么
$（'p'）.text（“UI不是空闲的。”）；
startTimer（）；
}
函数goInactive（）{
$（'p'）.text（“UI处于空闲状态”）；
//在UI空闲时替换光标
//这部分不行
$（'cursory'）.css（“背景色”、“红色”）；
}
//这将更改指向css元素的指针
$（文档）.ready（函数（）{
$（文档）.on（'mousemove'，函数（e）{
$（'.cursory'）.css({
左：e.pageX，
顶部：e.pageY
});
});
});
/*这就是CSS样式的发展方向*/
html{
光标：无；
}
.草率{
高度：10px；
宽度：10px；
边界半径：100%；
背景颜色：绿色；
位置：相对位置；
}
你好
粗略的.className$('.cursory').css("background-color","red");
很可能是缺少了问题“ 一篇关于选择器的小文章：
根据上面的代码，您的jQuery调用中似乎没有使用适当的CSS选择器 改变这个
$('cursory').css("background-color","red");
你错过了。来自$（'cursory'）.css（“背景色”，“红色”）；它应该是$（'.cursory'），因为类是用this@mplungjan，同意，似乎是个打字错误。我无法在开始时单击社区wiki。但我更喜欢回答而不是评论，因为1。对答案的评论不被注意。2.你现在可以在下面看到大量类似的答案。
$('cursory').css("background-color","red");
$('.cursory').css("background-color","red");