Question

我在wordpress中制作了一个模板，其中包含使用自定义帖子类型生成的投资组合。当我将鼠标悬停在投资组合图像上时，我试图制作一个幻灯片切换效果。

问题在于，当我悬停图像时，它只在第一个项目上显示我的切换，并且它会多次切换。我该如何解决这个问题？

您可以在http://www.camillawestin.se

处自行查看问题

（对不起，如果代码有点乱）。

jQuery的：

   $(".portfolio-item").hover(function () {
    $("#port-link").slideToggle("fast");
    });

Wordpress模板：

 <?php
    $args = array(
    'post_type' => 'portfolio'
    );
    $portfolio = new WP_Query( $args );
    if( $portfolio->have_posts() ) {
        while( $portfolio->have_posts() ) {
            $portfolio->the_post();
            ?>

            <div class="portfolio-item">
            <a href="<?php meta('special-link'); ?>"><div class="port-image"><?php the_post_thumbnail();?></div></a>



                <div id="port-link">
                <div class="port-tags"><?php the_tags($sep); ?></div>
                <div class="port-click">Klicka för att se hemsidan</div>
                </div>


                <a href="<?php the_permalink(); ?>"><h3 class="port-title"><?php the_title() ?></h3></a>
                <!--<a target="_blank" href="<?php meta('special-link'); ?>">Link</a>-->
                <div class='content'>
                    <?php the_content() ?>
                </div>
                </div><!--portfolio-item-->
            <?php
        }
    }
    else {
        echo 'Oh uhm there is no portfolio here yet!';
    }
?>

CSS：

    .portfolio-item {float: left; padding: 9px;}

    #port-link { 
    display:none; 
    left: 0;
    bottom: 0;
    width: 282px;
    opacity: 0.9;
    background: #000;
    color: #fff;
    margin-top: -60px;
    padding: 10px;
    height: 38px;}

Answer 1

首先，id必须是唯一的，而是使用类。接下来，您将只想定位悬停区域内的端口链接。

$(".portfolio-item").hover(function () { 
    $(this).find(".port-link").slideToggle("fast");
});

但请注意.hover（）即将消失，需要将其替换为：

$(".portfolio-item").on("mouseenter mouseleave", function () { 
    $(this).find(".port-link").slideToggle("fast");
});

jQuery SlideToggle，使用Wordpress Custom Posts多次切换

1 个答案: