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

我正在尝试将事件附加到单独的悬停触发器。但由于动态，我在使用多个选择器时遇到问题。

需要帮助:::将鼠标悬停在名为“戒指”的黄色框上时，这将触发其上方绿色框的动画幻灯片事件。

$('.boxgrid1').hover(function(){
    $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
}, function() {
    $(".cover", this).stop().animate({top:'247px'},{queue:false,duration:300});
});

最佳答案

通过一些标记调整，我们可以大大简化您的代码，例如，让我们也为那些悬停的<div>元素提供一个通用类，如下所示：

<div class="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()调用）用户的单个可悬停区域。