0

我想用相同的 .class 创建多个缩略图。缩略图 div 包含 3 个其他 div。第一个是图像，第二个是显示在 mouseenter 上的描述，第三个是改变不透明度的条。

当鼠标悬停在 .thumbnail 上方时，两个元素都应该执行它们的功能。

我的问题是现在每个缩略图都执行该功能，所以现在每个缩略图都突出显示。如何更改此设置，以便在悬停在其上方时仅突出显示一个缩略图？

HTML：

<div class="thumbnail">    
    <div class="thumbnail_image">
        <img src="img/Picture.png">
    </div>

    <div class="thumbnail_describe">
        <p>Description</p>
    </div>

    <div class="thumbnail_footer">
        <p>Text</p>
    </div>
</div>

jQuery：

$(document) .ready(function() {

var $thumb = $('.thumbnail')
var $thumb_des = $('.thumbnail_describe')
var $thumb_ft = $('.thumbnail_footer')

//mouseover thumbnail_describe
$thumb.mouseenter(function() {
    $thumb_des.fadeTo(300, 0.8);
});

$thumb.mouseleave(function() {
    $thumb_des.fadeTo(300, 0);
});


//mouseover thumbnail_footer
$thumb.mouseenter(function() {
    $thumb_ft.fadeTo(300, 1); 
});

$thumb.mouseleave(function() {
    $thumb_ft.fadeTo(300, 0.8);
});

});
4

3 回答 3

0

您的代码行为是这样的，因为您将该fadeTo函数应用于分别包含页面的所有描述和页脚的选择器$thumb_des和选择器。$thumb_ft

相反，您应该在 mouseenter 或 mouseleave 函数中选择触发鼠标事件的缩略图的描述和页脚。

您可以更改以优化代码的另一件事是仅使用一次事件侦听功能，并同时对描述和页脚执行两个操作：

$thumb.mouseenter(function() {
    var $this = $(this)
    $this.find('.thumbnail_describe').fadeTo(300, 0.8);
    $this.find('.thumbnail_footer').fadeTo(300, 1); 
});

完整的工作jsfiddle：http: //jsfiddle.net/Yaz8H/

于 2014-01-23T23:47:35.110 回答
0

当你这样做时：

$thumb_des.fadeTo(300, 0.8);

它会淡化 $thumb_des 中的所有节点。您想要的是仅淡化与 $thumb 中正确节点对应的那个。

尝试这个：

for (i = 0; i < $thumb.length; i++)
{
    $thumb[i].mouseenter(function (des) {
        return function() {
            des.fadeTo(300, 0.8);
        };
        }($thumb_des[i]));
    });
}
于 2014-01-23T23:31:38.037 回答
0

您需要访问该特定缩略图的子对象，这样可以工作：

$(this).children('.thumbnail_describe').fadeTo(300, 0.8);

这是一个小提琴示例。

于 2014-01-23T23:31:45.210 回答