jQuery鼠标从数组中移动

我做了一个名为navarea的div，里面还有6个div。当我把鼠标移到上面时，我想改变那里的背景色

我不希望每个div都有6个鼠标悬停函数，而是希望从数组中获取div的名称

我可以在不使用mouseover函数的情况下以这种方式更改背景颜色，但只要添加mouseover函数，它就完全不起任何作用

提前感谢您的帮助

账单

无标题文件
$（文档）.ready（函数（）{
var mainnav=[“仪表板”、“销售”、“营销”、“生产”、“账户”、“注销”]；
jQuery.each（mainnav，function（）{
$（“#”+this）.mouseover（function（）{//为什么此行失败？
$（“#”+this.css（“背景色”，“#8c9aa0”）；
});  
});
});
#导航区{
高度：自动；
宽度：180px；
背景色：#FFF；
}
#仪表板{
高度：自动；
宽度：180px；
背景色：#FFF；
}
仪表板
销售额
营销
生产
账户
注销

您只需使用CSS

：hover

类更改背景颜色：

#navarea div:hover {
    background-color: #8c9aa0;
}

此外，不能使用each循环设置鼠标悬停侦听器。鼠标悬停功能不起作用。在jQuery代码中，您还应该使用

$（this）

，而不是

this

。尝试以下代码，尽管上面CSS中显示的示例会更加有效：

   $('#navarea div').mouseover(function(){
      $(this).css("backgroundColor","#8c9aa0");
   });  

---

您不正确地使用了each函数。如果要定位的

div

s位于父元素内（例如，假设父元素为

mainnav

），则应执行以下操作：

$("#mainnav").children().each(function(){
  $(this).hover(function(){
    $(this).css("background-color","#8c9aa0");
  }, function(){
    $(this).css("background-color","[insert mouseout color here]");
  });
});

.hover（）函数允许您将mouseover和mouseout元素放在同一个函数中，如上所示。这将代码最小化

$（“#”+this）

毫无意义，因为jQuery中的

$（this）

选择活动元素

我使用了

.children（）

函数。所有这些操作都是选择嵌套在所选元素中的元素，在本例中为

#mainnav

---

更多关于

.each（）

和更多关于

.children（）

是否有不使用CSS

的特定原因：hover

类？

$("#mainnav").children().each(function(){
  $(this).hover(function(){
    $(this).css("background-color","#8c9aa0");
  }, function(){
    $(this).css("background-color","[insert mouseout color here]");
  });
});