jQuery multiple class .hover issue

Question

I'm still a bit of a jQuery noob. I'm creating a fitness website where a user can hover over different body parts which then highlight a different colour. I want all divs with class 'arms' to turn red when a user hovers ONE of the arms (ids "leftarm" and "rightarm") but at the moment, nothing happens.

Any help would be appreciated :)

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>

Sam Creamer · Accepted Answer · 2014-05-20 18:39:37Z

2

do like this otherwise all the elements with class arms backgroung color will get changed:

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

also wrap it in $(document).ready()

$(document).ready(function(){

//your code here

});

UPDATED:

<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>

Change the code like this:

WORKING FIDDLE DEMO

edited May 20, 2014 at 18:39

Sam Creamer

5,38113 gold badges39 silver badges49 bronze badges

answered May 20, 2014 at 17:23

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ChrisWness Over a year ago

I WANT all class 'arms' to change! But at the moment, even when changed to this code, it does nothing at all.

ChrisWness Over a year ago

Yes I have, but it's not doing anything even though it works on the fiddle.

ChrisWness Over a year ago

No, just HTML, CSS and Javascript.

Ehsan Sajjad Over a year ago

whenever you include a jquery script or library it should be like this

Ehsan Sajjad Over a year ago

and for writing your code use a separate script tag other wise behavior will be unexpected

Dhaval Marthak · Accepted Answer · 2014-05-20 17:24:30Z

1

Try this:

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

You're applying css to all elements in the DOM which are having class .arms, Target the current element which is hovered and you will see the desired effect.

Fiddle

answered May 20, 2014 at 17:24

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

1 Comment

ChrisWness Over a year ago

I'd like both arms to change when I hover over one or the other though.

Collectives™ on Stack Overflow

jQuery multiple class .hover issue

2 Answers 2

5 Comments

Fiddle

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related