jQuery在Wordpress中悬停:淡出隐藏的div,同时淡出“默认”

时间:2011-11-09 13:49:52

标签: javascript jquery wordpress hover fadein

我在使用Wordpress循环使用jQuery的悬停功能时遇到了问题。每当我悬停一个图像(有6个)时,它们都会褪色而不是单个图像。请帮忙。

这是我的代码:

<?php query_posts('showposts=6&cat=-4'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); if ( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>

<li class="show1">

<?php $thumb = get_post_meta($post->ID, 'thumb', true); ?>

<a href="#" title="Permanent Link to <?php the_title_attribute(); ?>" class="show"><?php echo$thumb; ?></a>

<div class="hide">

    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

    <?php the_excerpt(); ?>

    <a class="view_project" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">View Project »</a>
</div>
</li>

我的Javascript是

<script type="text/javascript">
$(function() {
$('li.show1').children('.hide').hide();

$('li.show1').hover(function() {
    $(this).children('a.show').fadeOut('slow')
        .end().children('.hide').fadeIn('slow');
}, function() {
    $(this).children('a.show').fadeIn('slow')
        .end().children('.hide').fadeOut('slow');
});
});
</script>

谢谢你们。

1 个答案:

答案 0 :(得分:0)

$('a.show')替换为$(this).children('a.show') - 这会将您的fadeOut限制为悬停在li内的锚点链接。