使用jQuery遍历父树

Question

The question I have surrounds traversing an element's parents and triggering a CSS class on multiple elements.

Consider I have the following:

<article class="portfolio type-portfolio">
<figure>
  <a class="recent-main-category" href="#">
    <span class="image_container_img">
        <img class="fullwidth" src="/wp-content/themes/qreator/images/community.jpg" />
    </span>
  </a>
</figure>

<header class="entry-header">
  <h4 class="entry-title p_name">
    <a href="#" class="main-category-title">
      Hosting Community
    </a>
  </h4>

<div class="entry-content">             
 <div class="recent-in-category">
 <a href="<?php echo the_permalink(); ?>"><?php echo the_title(); ?></a>
 </div>
</div>
</article>

What I want to do is trigger a CSS class to be temporarily applied on mouseover of the image (".fullwidth"). The same class would also be applied to the item title ".main-category-title"

I would also like this trigger to work vice versa, as in, a mouseover of ".main-category-title" will trigger the effect on ".fullwidth" (the image element).

I am hoping this image might explain more clearly:

Answer 1

It's easy with http://api.jquery.com/hover/

 $(".fullwidth, .main-category-title").hover(function(){
    $(".fullwidth, .main-category-title").addClass('tempClass');
 },function(){
    $(".fullwidth, .main-category-title").removeClass('tempClass');
 });

Answer 2

Try

$('.type-portfolio').find('.fullwidth, .main-category-title').hover(function(){
    $(this).closest('.type-portfolio').find('.fullwidth, .main-category-title').addClass('selected')
}, function(){
    $(this).closest('.type-portfolio').find('.fullwidth, .main-category-title').removeClass('selected')
})

Demo: Fiddle