1

对于一个商业网站，我试图实现以下目标： - 一个带有客户推荐的 div。- 包含这些客户徽标的列表。

当用户将鼠标悬停在徽标上时，应在 div 中显示正确的推荐。

我有以下标记：

<div id="testimonial-container"><div class="testimonial">Here comes a testimonial</div>
    <div class="testimonial">Here comes another testimonial</div>
    <div class="testimonial">And another one</div>
    <ul class="testimonial-logos">
       <li><a><img src="logo-1.jpg" /></a></li>
       <li><a><img src="logo-2.jpg" /></a></li>
       <li><a><img src="logo-3.jpg" /></a></li>
    </ul>
</div>

悬停效果将使用 CSS（不透明度：0 和 1）完成，因此它不是真正的滑块。

要将类添加到活动推荐中，我使用以下代码：

jQuery('#testimonial-container .testimonial-logos a').hover(function(){
    jQuery('#testimonial-container .testimonial, #testimonial-container .testimonial-logos a').addClass('active');
});

任何想法如何切换 div 中的推荐？提前致谢！

4

4 回答 4

1

例如，我会给您的每个推荐书一个 ID，<div class"testimonial" id="logo-1.jpg">然后将鼠标悬停在您的徽标上，它可以找到正确的推荐书并显示它

于 2012-06-27T12:01:30.127 回答
1

假设推荐与相应徽标的顺序相同，那么这样的事情将起作用（放置在文档就绪处理程序或正文末尾的脚本块中）：

var $container = $("#testimonial-container"),
    $testimonials = $(".testimonial", $container).hide();

$(".testimonial-logos li", $container).hover(function() {
    $testimonials.eq( $(this).addClass("active").index() ).show();
}, function() {
    $testimonials.eq( $(this).removeClass("active").index() ).hide();
});

演示：http: //jsfiddle.net/YG5aV/3

这会缓存一个包含推荐 div 的 jQuery 对象，并立即将它们全部隐藏。然后在悬停处理程序中，在鼠标输入时，它会显示与被悬停的徽标相对应的那个，而在鼠标离开时，它会再次隐藏它。

更新：如果打算只在鼠标进入而不是鼠标进入和离开时做某事，那么我建议.mouseenter()而不是.hover()因为后者是分配进入处理程序和离开处理程序的快捷方式。以下内容执行您在评论中描述的内容 - 请注意.eq(0).mouseenter()最后的 li 元素，它会触发第一个 li 元素的 mouseenter ，以便它成为开始的活动元素。

var $container = $("#testimonial-container"),
    $testimonials = $(".testimonial", $container).hide(),
    $prev;

$(".testimonial-logos li", $container).mouseenter(function() {
    if ($prev)
       $testimonials.eq( $prev.removeClass("active").index() ).hide();
    $testimonials.eq( ($prev = $(this).addClass("active")).index() ).show();
}).eq(0).mouseenter();

演示：http: //jsfiddle.net/YG5aV/4/

于 2012-06-27T12:07:04.983 回答
1

您可以使用 .index() 和 .eq() 选择器来确定您悬停的链接。

$('#testimonial-container .testimonial-logos a').hover(function(){
    var index = $('#testimonial-container .testimonial-logos a').index(this);
    $('#testimonial-container .testimonial, #testimonial-container .testimonial-logos a').removeClass('active');
    $('#testimonial-container .testimonial, #testimonial-container .testimonial-logos a').eq(index).addClass('active');
});

jsfiddle 链接：http: //jsfiddle.net/8EgB4/

于 2012-06-27T12:11:24.983 回答
0

您可以使用index获取悬停子项的序号，然后使用nth-child 选择器访问相关推荐。nth-child 选择器使用序数，因此您需要将 1 添加到索引值才能获得正确的推荐。您还需要确保以相同的顺序列出您的徽标和推荐。

于 2012-06-27T12:11:04.190 回答