Question

我仍然是一个jQuery noob。我正在创建一个健身网站，用户可以将鼠标悬停在不同的身体部位上，然后突出显示不同的颜色。当用户徘徊其中一只手臂（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的所有元素，定位当前悬停的元素，您将看到所需的效果。

jQuery多类.hover问题

2 个答案:

Fiddle