Question

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

这是我的js导入函数.php mycustomjs.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（）对吗？

Answer 2

尝试将此添加到style.css：

，而不是使用JavaScript

.top-featured-image .effect {
    display: none;
}

.top-featured-image:hover .effect {
    display: block;
}

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

2 个答案: