Javascript 使用Jquery更改悬停时的单位背景色

我试图在jquery中创建的div表中获取一个单元格，当我将鼠标悬停在该单元格上时，该单元格将改变颜色，当鼠标离开该单元格时，该单元格将保持该颜色

我曾尝试添加.hover命令，但当我添加它时，整个网格都消失了

以下是我在JSFIDLE的代码：

$（文档）.ready（函数（）{
$（函数（）{
对于（变量x=0；x<16；x++）{
对于（变量y=0；y<16；y++）{
$（“”）.addClass（“unit”）.appendTo（“#container”）；
}
}
});
$（“.unit”）.hover（）{
$（this.css（“背景色”、“黑色”）；
});
});
#容器{
背景颜色：浅蓝色；
高度：192px；
宽度：192px；
}
.单位{
背景色：白色；
高度：10px；
宽度：10px；
保证金：1px；
浮动：左；
}
除了两个语法问题外，您的逻辑是正确的。首先，您需要提供一个函数，在触发
mousenter
和
mouseleave
事件时执行
hover（）
。其次，您有嵌套的document.ready处理程序，应该将其展开。对于那些固定的，它工作得很好

但是请注意，您可以进行一些调整来改进逻辑。首先，当您在所有迭代中附加相同的HTML时，嵌套循环是多余的。您可以使其成为单个循环。其次，更好的做法是将所有样式保留在CSS中，这样您就可以简单地使用
addClass（）
来更改背景颜色。最后，
hover（）

说了这么多，试试这个：


$（文档）.ready（函数（）{
var html=''
对于（变量x=0；x<16*16；x++）{
html+=''；
}
$（html）.appendTo（“#container”）；
$（“.unit”）.mouseenter（函数（）{
$（this.addClass（'black'）；
});
});
#容器{
背景颜色：浅蓝色；
高度：192px；
宽度：192px；
}
.单位{
背景色：白色；
高度：10px；
宽度：10px；
保证金：1px；
浮动：左；
}
.黑色{
背景色：#000；
}
除了两个语法问题外，您的逻辑是正确的。首先，您需要提供一个函数，在触发
mousenter
和
mouseleave
事件时执行
hover（）
。其次，您有嵌套的document.ready处理程序，应该将其展开。对于那些固定的，它工作得很好

但是请注意，您可以进行一些调整来改进逻辑。首先，当您在所有迭代中附加相同的HTML时，嵌套循环是多余的。您可以使其成为单个循环。其次，更好的做法是将所有样式保留在CSS中，这样您就可以简单地使用
addClass（）
来更改背景颜色。最后，
hover（）

说了这么多，试试这个：


$（文档）.ready（函数（）{
var html=''
对于（变量x=0；x<16*16；x++）{
html+=''；
}
$（html）.appendTo（“#container”）；
$（“.unit”）.mouseenter（函数（）{
$（this.addClass（'black'）；
});
});
#容器{
背景颜色：浅蓝色；
高度：192px；
宽度：192px；
}
.单位{
背景色：白色；
高度：10px；
宽度：10px；
保证金：1px；
浮动：左；
}
.黑色{
背景色：#000；
}
当鼠标进入时，以下内容将更改元素的背景颜色，然后解除处理程序的绑定（因此代码将仅在第一个
鼠标指针上执行
——如您的说明所述）

供参考的jQuery mouseenter文档：

更新（为了演示而简化）fiddle:
以下内容将在鼠标进入时更改元素的背景颜色，然后解除处理程序的绑定（因此代码将仅在第一个
鼠标上执行，如您的说明所述）

供参考的jQuery mouseenter文档：

更新（为了演示而简化）fiddle:
注意，如果元素已经具有
.className
，您还可以使用
.not（）
避免再次调用
.addClass（）
；e、 例如，
$（“#container”）。在（“mouseenter”，“.unit:not（.black）”
@guest271314上，由于事件处理程序未被删除，因此在此处不会产生影响。注意，如果元素已具有
.className
，则还可以使用
.not（）
避免再次调用
.addClass（）
；例如，
$（“container”）。在（“mouseenter”）上，“.unit:not（.black）”
@guest271314在这里没有效果，因为事件处理程序没有被委托。表是由jquery代码创建的，而不是在html中。啊，好的，它是for循环。表是由jquery代码创建的，而不是在html中。啊，好的，它是for循环。
$(".unit").mouseenter(function() {
  $(this).css("background-color", "black");
  $(this).unbind('mouseenter');
});