这可以很容易实现,而无需使用任何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
套.dummy
到display: 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-09 10:22:55
Joe
'$(这)'是在你的代码 –
了'document'你有一组额外的右括号('})的;'),但可能只是一个错字的问题,而不是一个错误代码。 – martincarlin87