CODEWITHSUNDEEP
javascriptjqueryhovermouseover
Lawrence
Lawrence

Reputation: 727

Keep div opened on hover while moving between divs (using jQuery)

thanks for reading.

Currently, the following is my code:

<script>
$(document).ready(function(){
    $('.withdraw_money').hover(function(){
        if ($("#withdraw_money_div").is(":hidden")){
            $("#withdraw_money_div").slideDown("slow")
        }else{
            $("#withdraw_money_div").hide()
        }
    });
});
</script>

Okay. So, I'm able to get the div(#withdraw_money_div) to slide down when the other div(.withdraw_money) is on hover . But my problem now is how can i make the div continue to stay on hover when i shift my mouse over to #withdraw_money_div?

I just can't seem to find a way to do it. Any help appreciated

Upvotes: 0

Views: 1105

Answers (2)

Scott Selby
Scott Selby

Reputation: 9570

in your HTML put #withdraw_money_div into '.withdraw_money' , making a child and therefore you will still be on .withdraw_money hover event

ALSO..

$(document).ready(function(){
$('.withdraw_money').hover(function(){
    if ($("#withdraw_money_div").is(":hidden")){
        $("#withdraw_money_div").slideDown("slow")
    }else{                            // why is this here?
     $("#withdraw_money_div").hide() //if div isn't hidden(shown) you're hiding it!!
    }
  });
});

I would suggest .mouseOver or .hoverwith 2 functions , it will cover mouse over and a function for when you hover out of div - I think that is what you ment by else statement

Upvotes: 1

Tats_innit
Tats_innit

Reputation: 34107

Working demo try this http://jsfiddle.net/YuBNT/

Hope it fits the cause :)

Code

  $(document).ready(function() {
        $("#withdraw_money_div").hide();
        $('.withdraw_money').hover(function() {
            $("#withdraw_money_div").slideDown("slow")


        }, function() {
            $("#withdraw_money_div").slideUp("slow")

        });
    });​

Upvotes: 0

Related Questions