0

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

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

您可以在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;}
4

1 回答 1

0

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

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

但是请注意 .hover() 正在消失，它需要替换为：

$(".portfolio-item").on("mouseenter mouseleave", function () { 
    $(this).find(".port-link").slideToggle("fast");
});
于 2013-05-02T16:08:53.960 回答