jQuery hover with multiple items

Question

So I've got four circles next to each other, and when you move the mouse from one to the other, this code activates. But I only want it to activate when you move off/on any of the circles, not when you move from one .circle to another. Thanks folks!

 $('.circle').hover(
    function () {
        $(this).parent().animate({marginLeft: '-=25px'}, 1000);
    },
    function () {
        $(this).parent().stop(true, true).animate({marginLeft: '+=25px'}, 1000);
    }
 );

Register the event with the parent of all four circles and not the circles themselves? — TheZ
– TheZ, Commented Jun 29, 2012 at 17:52
but they are actually circles and I don't want it activating when you are outside the circles, but inside the parent. — dezman
– dezman, Commented Jun 29, 2012 at 17:54
Then use a boolean, true when already toggled and false when not. It determines when you animate and when you don't. — TheZ
– TheZ, Commented Jun 29, 2012 at 17:55
Could you refer me to somewhere that explains how to do that. It sounds like it would work, but I don' know how to implement it. Thanks. — dezman
– dezman, Commented Jun 29, 2012 at 18:01

Mike · Accepted Answer · 2012-06-29 18:16:24Z

1

check out this fiddle... http://jsfiddle.net/WxNdN/3/

e.relatedTarget should give you the element that you have entered or left. Check its class to see if it is a circle before firing your animation.

$('.circle').hover(
    function (e) {

        if(!$(e.relatedTarget).hasClass('circle'))
        {
            console.log('entering');
        }
    },
    function (e) {

        if(!$(e.relatedTarget).hasClass('circle'))
        {
            console.log('leaving');
        }
    }
 );

edited Jun 29, 2012 at 18:16

answered Jun 29, 2012 at 18:11

Mike

6534 silver badges8 bronze badges

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

3 Comments

dezman Over a year ago

This is great, except there is space between my circles, so I think I need some delay() or something, to wait to check if the user will move over the next circle within a quarter second or something.

Mike Over a year ago

Do you have a public example of your circles? I may be able to whip something nifty together tomorrow.

dezman Over a year ago

Here it is So, yeah, it works pretty nice, but I don't like the latent left/right movement when you move from one circle to the next.

LOLapalooza · Accepted Answer · 2012-06-29 17:55:23Z

0

Without seeing the html, I'm guessing you'd need all of the circle class elements to be wrapped within a container, and then put the hover event on the container. So something like

<div id="container">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

and then

$('#container').hover(functions...)

You'd then probably have to change $(this).parent() but it's hard to tell without seeing your current HTML structure.

answered Jun 29, 2012 at 17:55

LOLapalooza

2,0823 gold badges17 silver badges22 bronze badges

Collectives™ on Stack Overflow

jQuery hover with multiple items

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related