将鼠标悬停在图像上时触发图像上的类（WordPress）

Question

我目前使用以下代码循环获取所有这些帖子，并显示它们：

     <div class="row" style="margin-bottom:50px;">
                        <!-- First, the loop checks whether any posts were discovered with the have_posts() function. -->
                        <?php if (have_posts()) : ?>
                        <!-- First, the loop checks whether any posts were discovered with the have_posts() function. -->
                        <!-- If there were any posts, a PHP while loop is started. A while loop will continue to execute as long as the condition in the parenthesis is logically true. So, as long as the function have_posts() returns a true value, the while loop will keep looping (repeating). -->
                        <?php while (have_posts()) : the_post(); ?>
                        <a href="<?php echo get_permalink(); ?>">
                         <?php echo "<div class='col-md-6 col-sm-6 col-xs-12' style='margin-bottom:30px;'>"; ?>
                         <div class="row mobilemargin">
                              <div class="categorytiletext">
                                    <div class="col-md-6 col-sm-12 col-xs-12 nopr"><?php echo get_the_post_thumbnail( $page->ID, 'categoryimage', array('class' => 'newimgheight hovereffect')); ?> </div>
                                    <div class="col-md-6 col-sm-12 col-xs-12 mobilewhite">
                                          <div class="testdiv">
                                               <h5 class="captext"><?php the_title(); ?></h5>
                                               <?php $trimexcerpt = get_the_excerpt();

                                               $shortexcerpt = wp_trim_words( $trimexcerpt, $num_words = 10, $more = '… ' ); 

                                               echo '<a href="' . get_permalink() . '"><p>' . $shortexcerpt . '</p></a>'; 

                                               ?>
                                         </div>
                                   </div>
                             </div>
                       </div>
                       <?php echo "</div>"; ?>

                 </a>
                 <!-- If there is no posts, display an error message -->
           <?php endwhile; else: ?>
           <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
     <?php endif; ?>
     <!-- If there is no posts, display an error message -->
</div>

现在，我有了一个类，该类在我的图像上名为hovereffect，这使不透明度发生了变化。 如您所见，图像在6列中，文本在6列中。 有没有一种方法，当文本悬停在上方时，可以更改图像的不透明度？

Answer 1

您可以使用jQuery hover（）方法 ，如下所示：

$('p').hover(function() {
  $('.hovereffect').css('opacity', '0.5');
});

除了直接更改CSS外，您还可以切换另一个类或您喜欢的类。

编辑：我刚刚读到您使用hovereffect类更改不透明度。 在这种情况下，您不应在php中添加该类，而应使用以下jQuery：

$('p').hover(function() {
  $('.anotherClassOnYourImage').toggleClass('hovereffect');
});

不应将“ p”用作选择器，而应向其添加一个类。