我试图将事件附加到单独的onhover触发器.但是由于它的动态,我在使用多个选择器时遇到了问题.
需要帮助:::当悬停在名为’Rings’的黄色方框上时,这应触发其上方绿色框的动画幻灯片事件.
$('.Boxgrid1').hover(function(){
$(".cover",this).stop().animate({top:'0px'},{queue:false,duration:300});
},function() {
$(".cover",this).stop().animate({top:'247px'},duration:300});
});
最佳答案
通过一些标记调整,我们可以大大简化您的代码,例如让我们给那些悬停< div>元素也是一个共同的类,如下所示：
Boxgrid Boxgrid1">
然后您的代码变得更加简单,您可以用以下代码替换所有重复的代码：
$('.Boxgrid .cover').css({ top: '247px' });
$('.Boxgrid').hover(function() {
$(".cover",this).stop().animate({ top: '0px' },300);
},function() {
$(".cover",this).stop().animate({ top: '247px' },300);
});
$("#shop_buttons_table tr:nth-child(2)").delegate("td","mouseenter mouseleave",function(e) {
$("#shop_buttons_table tr:nth-child(1) .Boxgrid").eq($(this).index()).trigger(e);
});
You can test it out here,我们正在做的就是从较低的单元格中获取“悬停”事件并将它们传递到行中的.Boxgrid元素之前,净效果(使用您已经拥有的.stop()调用)是一个单一的可停止区域.用户.
