javascript - 使用 jQuery 遍历父树

Question

我遇到的问题是遍历元素的父元素并在多个元素上触发 CSS 类。

考虑我有以下内容：

<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>

我想要做的是触发一个 CSS 类临时应用于图像的鼠标悬停（“.fullwidth”）。相同的类也将应用于项目标题“.main-category-title”

我也希望这个触发器反之亦然，例如，“.main-category-title”的鼠标悬停将触发“.fullwidth”（图像元素）的效果。

我希望这张图片可以更清楚地解释：

Answer 1

使用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

尝试

$('.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')
})

演示：小提琴