0

私が持っている質問は、要素の親をトラバースし、複数の要素で 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」(画像要素) の効果をトリガーするように、このトリガーが逆に機能することも望んでいます。

この画像がより明確に説明できることを願っています。 ここに画像の説明を入力

4

2 に答える 2

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');
 });
于 2013-09-17T15:26:23.357 に答える
0

試す

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

デモ:フィドル

于 2013-09-17T15:25:15.563 に答える