CODEWITHSUNDEEP
javascriptjquerycsstraversal
Barney
Barney

Reputation: 1848

Traversing through parent tree with jQuery

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: enter image description here

Upvotes: 0

Views: 103

Answers (2)

andrew
andrew

Reputation: 9583

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');
 });

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 0

Related Questions