3

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

3 Answers 3

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"});
   });
});
3
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.

1
  • 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? Feb 20, 2013 at 15:03
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(); 
});

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.