jQuery多类.hover问题

Question

我还是个jQuery的菜鸟。我正在创建一个健身网站，用户可以悬停在不同的身体部位，然后突出显示不同的颜色。我希望当一个用户悬停其中一个手臂(ids“左侧”和“右”)时，所有带有类“手臂”的div都会变成红色，但是目前，什么都没有发生。

如能提供任何帮助，将不胜感激:)

HTML

<div id="muscleStructure">
  <div class="arms" id="leftarm">
  </div>
  <div class="arms" id="rightarm">
  </div>
</div>

CSS

#muscleStructure{
  position:relative;
  width:150px;
}
.arms{
  height:150px;
  width:25px;
  background:#CF6;
  position:absolute;
  top:15px;
  cursor:pointer;
}
#rightarm{
  right:0px;
}
#leftarm{
  left:0px;
}

Javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">

$(".arms").hover(function(){
   $(".arms").css("background","#F00");
   },function(){
   $(".arms").css("background","#CF6");
});

</script>

Answer 1

这样做，否则所有具有类臂背景颜色的元素都会被更改：

$(".arms").hover(function(){
   $(this).css("background","#F00");
   },function(){
   $(this).css("background","#CF6");
});

也可以用$(document).ready()包装

$(document).ready(function(){

//your code here

});

更新：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">  </script>

<script>
$(document).ready(function(){

$(".arms").hover(function(){
   $(this).css("background","#F00");
   },function(){
   $(this).css("background","#CF6");
});

});

</script>

修改代码如下：

WORKING FIDDLE DEMO

Answer 2

试试这个：

$(".arms").hover(function(){
   $(this).css("background","#F00"); // $(this) instead $('.arms')
   },function(){
   $(this).css("background","#CF6"); // $(this) instead $('.arms')
});

您将css应用于DOM中所有具有类.arms的元素，将当前元素作为目标悬浮，您将看到所需的效果。

Fiddle