1

我仍在尝试掌握next()jQuery 中的函数。我创建了一个悬停功能，当您悬停图像时，每张图像都会出现一个透明叠加层

单击此处查看示例

出于某种原因，我next()无法正常工作，我假设我的 jQuery 设置不正确。下面是我的代码片段：

$(document).ready(function () {
    var $this = $(this);
    $('.dummy').removeClass('overlay2');
    $this.parent().next('.dummy').addClass('overlay2');
});
});

有人可以纠正我哪里出错了吗？

4

1 回答 1

2

这可以在不使用任何 javascript 的情况下轻松完成：

.dummy {
    height: 100%;
    width: 100%;
    position: absolute;
    top:0;
    background: #000;
    opacity: 0.50;
    display: none;
}

.figure-item:hover .dummy{
    display: block;
}

我只是在您的样式表中更改.overlay2为并添加，然后将其悬停在设置为..dummydisplay: none;.figure-item.dummydisplay: block;

它在这里工作：http: //jsfiddle.net/zaX5U/6/

旧 JS 解决方案：

这应该适合你：

$(document).ready(function () {
    $('.figure-img').on('mouseenter mouseleave', function(e){
        var $this = $(this),
            toggle = e.type === 'mouseenter';
        $('.dummy').removeClass('overlay2');
        $this.find('.dummy').toggleClass('overlay2', toggle);
    });
});

您之前的代码不起作用的原因是因为您似乎忘记在其中包含事件处理程序的行（}):小提琴中有一个无与伦比的）。这意味着$(this)实际上是document这样，因此代码不起作用。

.hover()interally 映射到.on( "mouseenter mouseleave"，在这种情况下，它使代码更小以使用完整版本。这也使用.toggleClass()带有可选switch参数的函数来删除或添加类，具体取决于事件的类型。

小提琴：http: //jsfiddle.net/zaX5U/4/

于 2013-10-09T10:22:55.640 回答