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

发布于 2024-12-14 06:35:04 字数 1453 浏览 3 评论 0原文

我在使用 jQuery 的悬停功能和 Wordpress 循环时遇到问题。每次我将鼠标悬停在一张图像(共有 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>

谢谢大家。

I'm having problems using jQuery's hover feature with the Wordpress loop. Everytime I hover one image (there are 6), they all fade instead of just the single image. Please help.

Here's my code:

<?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>

and my Javascript is

<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>

Thanks guys.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

明月松间行 2024-12-21 06:35:04

$('a.show') 替换为 $(this).children('a.show') ——这会将淡出限制为锚链接内悬停在上面的li

Replace $('a.show') with $(this).children('a.show') -- this will restrict your fadeOut to the anchor links inside the li that was hovered over.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文