CODEWITHSUNDEEP
jqueryjquery-selectors
westernKid
westernKid

Reputation: 173

How to target earlier non-sibling element in jQuery?

I have the following HTML:

<ul>
    <li>
       <figure>
           <img class="overlay" src="...">
       </figure>
       <figcaption>
           <h3><a href="...">Text</a></h3>
       </figcaption>
   </li>
</ul>

When I mouseover the h3 inside the figcaption, I want to alter the opacity on the image class=overlay inside the figure. Good lord, surely this is simple but I've been doing my nut in trying

$('h3 a').mouseover(function(){
 $(this).closest('.overlay').css('opacity',1);
});

and changing closest to prev, prevAll, etc., all with no success. Any help will be met with jubilation!

Upvotes: 1

Views: 57

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115242

you can use the following method

$('h3 a').mouseover(function(){
 $(this).closest('li').find('figure .overlay').css('opacity',1);
});

http://api.jquery.com/category/traversing

Upvotes: 2

Jason P
Jason P

Reputation: 27022

I would use:

$(this).closest('li').find('.overlay');

See: http://api.jquery.com/category/traversing/. Generally speaking, you just need to browse that category to find the correct combination of traversal functions to use.

Upvotes: 1

Related Questions