Wordpress 中的 jQuery 悬停:淡入隐藏的 div,同时淡出“默认”;一
我在使用 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
将
$('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 theli
that was hovered over.