Question

我想用相同的.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);
});

});

Answer 1

当你这样做时：

$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]));
    });
}

Answer 2

你想要访问那个特定缩略图的子对象，这样的东西可以工作：

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

这是fiddle example。

Answer 3

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

相反，您应该在mousenter或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/

赋予多个div相同的功能

3 个答案: