jquery trigger hover on another element with same selector attributes

Question

It sounds simple, and there's a solution involving altering CSS classes, but I was wondering if there's an elegant, on the fly solution to the following issue.

This is a similar question, but it creates "too much recursion" for my scenario.

So I have 2 buttons that both go to the next tab; one at the top of the content, one below. And I want them both to show the state of hover when I hover over either one of them. They have the same html code;

<a href="#" class="button step-next" onclick="showStep(3); return false;">Next &raquo;</a>

and following the other post, I've tried the solution;

$('a.step-next').on('mousenter mouseleave', function(e) {
    $('a.step-next').not(this).trigger(e.type);
});

But my initial logic of using the not() is wrong; it'll just fire the event back and forward between each of the 2 elements.

Clearly, I can alter the CSS to add a new class and remove it on hover/not, which is the route I'll go down. But is there a trigger-only solution?

Is there any reason you can't just use the :hover pseudo class? Seems much simpler, if I don't miss anything. — Sacha
– Sacha, Commented Mar 11, 2013 at 11:00

Gabriele Petrioli · Accepted Answer · 2013-03-11 11:11:51Z

0

If i understand correctly you do not want the code-generated event to re-trigger the code..

If so, you can use the extraParameters of .trigger() method

$('a.step-next').on('mousenter mouseleave', function(e, fromCode) {
    if (fromCode === undefined){
        $('a.step-next').not(this).trigger(e.type, true);
    }
});

answered Mar 11, 2013 at 11:11

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jez Over a year ago

Although this doesn't resolve my need to use CSS classes to keep the hover style, See the link here - this does actually resolve the specific question of preventing the infinite loop that my code was generating, so I'm happy with the answer.

Jai · Accepted Answer · 2013-03-11 11:03:25Z

0

Not sure what you want to achieve(html required) but this might be the solution you are looking for :

$('a.step-next').on('mousenter mouseleave', function(e) {
  $(this).siblings('a.step-next').trigger(e.type);
});

answered Mar 11, 2013 at 11:03

Jai

74.8k12 gold badges77 silver badges104 bronze badges

1 Comment

Jez Over a year ago

In this instance the 2 elements don't sit within the same parent, otherwise this could of been a solution. Thanks for the reply.

Collectives™ on Stack Overflow

jquery trigger hover on another element with same selector attributes

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related