Question

我做了一个叫做navarea的div，在里面我还有6个div。当我鼠标移动时，我想改变背景颜色。

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

我可以通过这种方式在没有鼠标悬停功能的情况下更改背景颜色，但只要添加鼠标悬停功能，它就完全没有任何效果。

提前感谢您的帮助。

比尔

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {



var mainnav=["dashboard","sales","marketing","production","accounts","logout"];


jQuery.each(mainnav, function() {

$("#" + this).mouseover(function(){ // Why is this line is failing?
$("#" + this).css("background-color","#8c9aa0");
});  

});


});
</script>

<style type="text/css">
#navarea {
height: auto;
width: 180px;
background-color:#FFF;
}

#dashboard {
height: auto;
width: 180px;
background-color:#FFF;
}


</style>
</head>

<body>
<div id="navarea">
<div id="dashboard">Dashboard</div>
<div id="sales">Sales</div>
<div id="marketing">Marketing</div>
<div id="production">Production</div>
<div id="accounts">Accounts</div>
<div id="logout">Logout</div>
</div>

</body>
</html>

Answer 1

您正在不正确地使用每个功能。如果你想要定位的div是在父元素内（对于这个例子，假设父元素是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() here的更多信息以及有关.children() here的更多内容。

Answer 2

您只需使用CSS :hover类来更改背景颜色：

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

此外，您无法使用每个循环来设置鼠标悬停侦听器。鼠标悬停功能不起作用。在jQuery代码中，您还应该使用$(this)而不是this。尝试使用此代码，尽管上面CSS中显示的示例会更有效：

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

来自数组的jQuery鼠标悬停

2 个答案: