CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ChrisWness
ChrisWness

Reputation: 123

jQuery multiple class .hover issue

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>

Upvotes: 1

Views: 289

Answers (2)

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62498

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

Upvotes: 2

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

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

Upvotes: 1

Related Questions