JQuery hover multiple elements one function

Question

I have three divs with hidden inner divs, when you rollover over each div its inner div should display and when you rollout it hides again.

for example, I rollover div1, div1 inner appears, I rollout, div1 inner disappears.

However when I move my mouse from div1 directly over div2, both are treated as rollout, eg div1 inner disappears (as it should), div2 inner appears(as it should) but then instantly disappears with div1 inner.

Apart from writing separate functions for div1 2 and 3 I'm not sure what to do, any help much appreciated!!

jsfiddle.net/user1688604/UZpEH/3

var box = $("#box1,#box2,#box3");
var inner = $(".item");


$(box).hover(function() {
    $(this).find(inner).stop(true,true).css({"left":"20px"}).animate({"top":"-10px", "opacity": "1"},400);

}, function() {
    $(this).find(inner).stop(true,true).animate({"top":"-20px", "opacity": "0"},400, function() {
        $(inner).css({"left":"-9999px", "top":"0"});
        });
});



<div id="box1">
<div class="item"></div>
</div>

#box1, #box2, #box3 {
            width: 300px;
            float: left;
            margin-right: 20px;
            position: relative;
            }


            .item {
                width: 151px;
                height: 49px;
                padding: 5px 10px 0;
                opacity: 0;
                position: absolute;
                    top: 0;
                    left: -9999px;
                }

Kaizen Programmer · Accepted Answer · 2013-02-20 14:43:03Z

6

Add a class to the box divs (same class for each)

<div id="box1" class="box">
    <div class="item"></div>
</div>

jQuery

$(".box").hover(function(){
   $(this).find(".item").stop(true,true).css({"left":"20px"}).animate({"top":"-10px", "opacity": "1"},400);
},function(){
   $(this).find(".item").animate({"top":"-20px", "opacity": "0"},400, function() {
       $(this).css({"left":"-9999px", "top":"0"});
   });
});

answered Feb 20, 2013 at 14:43

Kaizen Programmer

3,8181 gold badge16 silver badges30 bronze badges

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

3 Comments

user1688604 Over a year ago

Thank you for your quick response, I have added a jsfiddle: jsfiddle.net/user1688604/UZpEH/3 It is still happening, I think maybe the rollout animation doesn't have time to finish if you move to the next box too fast?

Kaizen Programmer Over a year ago

Fixed it with my code..jsfiddle.net/UZpEH/5 You can't declare $(".item") outside of the hover because it will pull in all the divs with class item and run the animation on all of them.

Kaizen Programmer Over a year ago

I also recommend hoverIntent, when doing hover functions. cherne.net/brian/resources/jquery.hoverIntent.html

EnterJQ · Accepted Answer · 2013-02-20 14:43:02Z

0

On Whichever div or any fields , you wanna provide hover function just call then with same class name ,then trigger your function by referring that class name.

answered Feb 20, 2013 at 14:43

EnterJQ

1,0168 silver badges18 bronze badges

1 Comment

user1688604 Over a year ago

Thank you for your quick response, I have added a jsfiddle: jsfiddle.net/user1688604/UZpEH/3 It is still happening, I think maybe the rollout animation doesn't have time to finish if you move to the next box too fast?

Pandian · Accepted Answer · 2013-02-20 15:02:20Z

0

Try like below... it will help you..

Keep Same class name for all the DIV.. and try the below..

Fiddle Example : http://jsfiddle.net/RYh7U/96/

HTML :

<div class="divBox">
    Show Div1
<div class="item">
Div 1    
</div>
</div>

<div class="divBox">
    Show Div 2
<div class="item">
    Div 2

</div>
</div>

<div class="divBox">
    Show Div 3
<div class="item">    
    Div 3
</div>
</div>

JQuery :

$('.item').hide(); 
$('.divBox').hover(function() { 
    $(this).children('.item').show();     
}, function() { 
    $(this).children('.item').hide(); 
});

answered Feb 20, 2013 at 15:02

Pandian

9,1562 gold badges26 silver badges34 bronze badges

Collectives™ on Stack Overflow

JQuery hover multiple elements one function

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest