Uncoke
Uncoke

Reputation: 1902

jquery find() image by class

I would like to find an image by his class.

My code is like this:

<ul>
<li id='element_1'> <img src="images_1.png"  class="image_off"/></li>
<li id='element_2'> <img src="images_2.png"  class="image_off"/></li>
</ul>

Now when my mouse will be orver th LI I would like to select the inner image.

My jquery is like:

$("li").hover(

   var immagine = "img"
   ii= jQuery(this).find(immagine);
   $(ii).stop().animate({"opacity": "0"}, 500);

}

This is workin fine. But if I have 2 images innner the same LI and I try to select the image by his class using:

var immagine = "img.image_off"

it is not working....

Can you help me?

Upvotes: 1

Views: 8180

Answers (1)

NickV
NickV

Reputation: 71

Looks like you have your paradigms a bit mixed up here!

First off, you should be passing a function to the hover method. That will run the function each time you hover.

Inside the hover method you can then do a contextual search by passing in a selector and a context. In this case this will represent the li that you hovered over.

This identifies each of the children you want to operate on.

This should do what you need:

$("li").hover(function(){
    $("img.image_off",this).stop().animate({"opacity": "0"}, 500);
});

Upvotes: 3

Related Questions