CODEWITHSUNDEEP
jqueryjquery-selectors
nuclearsugar
nuclearsugar

Reputation: 109

jQuery multiple selectors into dynamic attribute

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});  
});

Upvotes: 5

Views: 377

Answers (2)

Nick Craver
Nick Craver

Reputation: 630429

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.

Upvotes: 4

erinus
erinus

Reputation: 734

Give a class name to your <a> tag outside <img>(RINGS) tag like <a class="boxgrid1" href="#">

Upvotes: 0

Related Questions