javascript - 使用 wordpress 悬停时显示/隐藏图像缩略图标签

Question

我想提出一个缩略图标签的输出，当它悬停时它会显示，如果它没有悬停，它将被隐藏。请帮助我在哪里或我做错了什么。我正在使用 wordpress，我是 wordpress 的初学者。我为我的 javascript 代码制作了一个自定义 js 文件，用于隐藏/显示悬停。

这是我在 functions.php 中导入 mycustomjs.js 中的 js，我在其中放置了我的 js 代码:

function wpbootstrap_scripts_with_jquery() {

 wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/bootstrap.js', array( 'jquery' ) );

    wp_enqueue_script( 'bootstrap-jquery', get_stylesheet_directory_uri() . '/js/jquery.min.js' );

    wp_enqueue_script( 'mycustomjs', get_stylesheet_directory_uri() . '/js/mycustomjs.js' );

}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

这里是 mycustomjs.js 的内容:

$(function() {
   $("span.effect").hover(function() {
    $(this).find("span").show();
    },function(){
    $(this).find("span").hide();
  });
 });

这是我的 wordpress 代码，其中带有类效果的跨度我想在它不悬停时隐藏它并在悬停时显示它:

<?php $count = 0; ?>
            <?php
            if( $projectsBlog->have_posts() ) : ?>
            <div class="container">
                <ul class="top-featured-image">
                <div class="row center-block">
                <?php while ( $projectsBlog->have_posts() ) : $projectsBlog->the_post(); ?>

                    <div class="col-xs-4 col-box1">
                    <li class="top-featured-image">
                    <span class="effect"><?php the_title(); ?></span>
                    <?php the_post_thumbnail(); ?>

                    </div>
                <?php if($count==2) :
                echo '</div>';
                echo '<div class="row center-block">'; 
                endif; ?>
                </li>
                <?php $count++; endwhile; ?>
                </ul>
                </div>
                <?php endif; ?>

这是我想要的，现在这是我的代码输出:

我希望图像悬停文本仅在悬停时显示，而在未悬停时隐藏。

Answer 1

代替 $(this).find() 使用 $(this).next().show();

因为我猜你想隐藏/显示 the_post_thumbnail() 对吗？