2013-10-09 26 views
1

我仍然试图在jQuery中获得next()函数的挂起。我创建了一个悬停功能,当鼠标悬停的形象,透明覆盖每个图像jquery next()函数不返回类

Click here for an example

似乎出于某种原因,我next()不工作,我假设我的jQuery设置不正确。以下是我的代码片段:

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

有人可以纠正我出错的地方吗?

+1

'$(这)'是在你的代码 –

+0

了'document'你有一组额外的右括号('})的;'),但可能只是一个错字的问题,而不是一个错误代码。 – martincarlin87

回答

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.dummy并添加display: 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/

+0

不错,但它是在悬停= P – EdenSource

+0

@EdenSource - 我修复了JS,并更新了我的答案,更好的CSS解决方案。 – Joe

+0

哇,它很漂亮;)GJ – EdenSource