jQuery将多个选择器转换为动态属性

我试图将事件附加到单独的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()调用)是一个单一的可停止区域.用户.