jQuery bind to multiple elements

Question

I've got:

<div class='someclass'>Text</div>
<div class='otherclass'>Other Text</div>
<style>
    .someclass{
        width:400px;
        height:200px;
    }
    .otherclass{
        width:400px;
        height:200px;
        display:none;
    }
</style>

$('.someclass').mouseover(function(){
    $('.otherclass').fadeIn();
});
$('.someclass).mouseout(function(){
    $('.otherclass').fadeOut();
});

But I dont want second div to fade out if the cursor goes over this second div.

I can use

$('.someclass,.otherclass').mouseover(function(){
    $('.otherclass').fadeIn();
});
$('.someclass,.otherclass').mouseout(function(){
    $('.otherclass').fadeOut();
});

but it blinks by crossing from one div to another.

I think, I can use timeouts, but is there a better way? Thx!

Solved. I've just had to use mouseleave instead of mouseout. It works with position:absolute if nested. — Kotanet
– Kotanet, Commented Mar 14, 2012 at 19:23

Justice Erolin · Accepted Answer · 2012-03-14 19:03:08Z

1

I'm guessing that you're using this for a nav submenu or something similar.

I would suggest nesting .otherclass within .someclass.

answered Mar 14, 2012 at 19:03

Justice Erolin

2,89921 silver badges19 bronze badges

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

1 Comment

Kotanet Over a year ago

yes, it's about submenu, but the second div has position:absolute, so the first's div dimensions does not change, when second div fades in...

Matthew Darnell · Accepted Answer · 2012-03-14 19:03:10Z

1

Can you wrap the two DIVs in another element and put the hover function on that outer element. That should cover the time when you are between the two.

answered Mar 14, 2012 at 19:03

Matthew Darnell

4,5862 gold badges22 silver badges30 bronze badges

Comments

Oleksandr Fentsyk · Accepted Answer · 2012-03-14 19:03:40Z

1

put 'otherclass' into 'someclass' and set in someclass min-height:200px;

<div class="someclass">
 <div>Some text</div>
 <div class="otherclass">text</div>
</div>

answered Mar 14, 2012 at 19:03

Oleksandr Fentsyk

5,4065 gold badges36 silver badges42 bronze badges

Collectives™ on Stack Overflow

jQuery bind to multiple elements

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related