jQuery multiple selectors into dynamic attribute

Question

I am trying to attach an event to a separate onhover trigger. But I am having problems using multiple selectors since its dynamic.

Need help ::: Upon hovering on the yellow box named 'Rings', this should trigger the animated slide event for the green box above it.

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

Answer 1

With a few markup tweaks we can greatly simplify your code, for example let's give those hover <div> elements a common class as well, like this:

<div class="boxgrid boxgrid1">

Then your code becomes much simpler, you can replace all that repeated code with this:

$('.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, all we're doing is taking the "hover" events from the lower cells and passing them onto the .boxgrid elements in the row before, the net effect (with the .stop() calls you already had) is a single hoverable area for the user.