javascript - Cancel setTimeout if mouse is over div - Stack Overflow

admin管理员组

文章数量:1334362

I have two div classes, say A and B. When the mouse is over div A, div B should appear, then if the mouse is over A or B, div B should stay opened. If the mouse is out of both, A and B divs, B should disappear. (As you probably guess this is a simple tooltip script)

This is the jquery code I wrote:

$(document).ready(function() {
    function show() {
        $("BBB").css({'display':'block'});
    }

    $("AAA").each(function() {
        $(this).mouseover(function() {
            show();
        });

        $(this).mouseleave(function() {
            time = setTimeout("hide()", 200);
        });

        $("BBB").mouseleave(function() {
            setTimeout("hide()", 200);
        });

        $("BBB").mouseenter(function() {
            clearTimeout(time);
        });
    });
});

function hide() {
    $("BBB").css({'display':'none'});
}

The problem is that when I move from B to A, B disappears! I want to it to disappear only if the mouse is neither over A, nor B. How can I fix this problem?

I have two div classes, say A and B. When the mouse is over div A, div B should appear, then if the mouse is over A or B, div B should stay opened. If the mouse is out of both, A and B divs, B should disappear. (As you probably guess this is a simple tooltip script)

This is the jquery code I wrote:

$(document).ready(function() {
    function show() {
        $("BBB").css({'display':'block'});
    }

    $("AAA").each(function() {
        $(this).mouseover(function() {
            show();
        });

        $(this).mouseleave(function() {
            time = setTimeout("hide()", 200);
        });

        $("BBB").mouseleave(function() {
            setTimeout("hide()", 200);
        });

        $("BBB").mouseenter(function() {
            clearTimeout(time);
        });
    });
});

function hide() {
    $("BBB").css({'display':'none'});
}

The problem is that when I move from B to A, B disappears! I want to it to disappear only if the mouse is neither over A, nor B. How can I fix this problem?

• javascript
• jquery

Share Improve this question Follow asked Feb 9, 2011 at 19:49 King JulienKing Julien 11.3k2424 gold badges9595 silver badges132132 bronze badges 4

• This should help you.. link – Mohib Sheth Commented Feb 9, 2011 at 19:57
• You do know jQuery has .show() and .hide() functions that do what your functions are doing, just say $("BBB").show(); $("BBB").hide();. – Orbling Commented Feb 9, 2011 at 19:58
• This is similar to the question asked here: stackoverflow./questions/4915977/… See the 3 answers I posted and the JSFIDDLE code. – Neil Commented Feb 9, 2011 at 19:58
• If you put your tooltip inside of the div that triggers it, a simple mouse over/out will work fine. See: jsfiddle/vfrQX – user1385191 Commented Feb 9, 2011 at 20:04

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

First, put B inside of A:

<div class="a">
    AAA
    <div class="b">
        BBB
    </div>
</div>

Then, abandon your javascript and make life easier with plain old css:

.b
{
    display: none;
}
.a:hover .b
{
    display: block;
}

Edit - Here's a live example using the CSS technique: http://jsfiddle/gilly3/sBwTa/1/

Edit - If you must use the JavaScript, just add clearTimeout(time) to show(). But, let's also simplify your code:

$(function()
{
    var time = 0;
    function show()
    {
        clearTimeout(time);
        $("BBB").show(); // Existing jQuery that does $().css("display","block")
    }
    function hide()
    {
        time = setTimeout(function()
        {
            $("BBB").hide();
        }, 200);
    }
    $("AAA,BBB").mouseenter(show).mouseleave(hide);
});

There are a few small problems with your code. The one which is biting your right now is that you aren't clearing BBB's timeout when you enter AAA. You can fix this by adding a clearTimeout to AAA's mouseover handler.

Secondly, it's safest to clear this kind of timeout before you set it each time, so that you don't have your timeout tracking overwritten if something unexpected happens. (It's always safe to clear a timeout, even if it's invalid or has already occurred.)

Lastly, though this is most likely only a problem in your example code, you're leaking time into the global object. ;-)

Try this instead:

$(document).ready(function() {
    var time;

    function show() {
        $("BBB").css({'display':'block'});
    }

    $("AAA").each(function() {
        $(this).mouseover(function() {
            clearTimeout(time);
            show();
        });

        $(this).mouseleave(function() {
            clearTimeout(time);
            time = setTimeout("hide()", 200);
        });

        $("BBB").mouseleave(function() {
            clearTimeout(time);
            time = setTimeout("hide()", 200);
        });

        $("BBB").mouseenter(function() {
            clearTimeout(time);
        });
    });
});

function hide() {
    $("BBB").css({'display':'none'});
}

Here's a script that works with meaningful function names that should make it easy to see what's going on. You have to cancel the hiding from mouseenter on both divs.

$(document).ready(function() {
  var timerId, delay = 300;
  var a = $("#A"),
    b = $("#B");

  function stopHide() {
    clearTimeout(timerId);
  }

  function showTip() {
    b.show();
  }

  function startHide() {
    timerId = setTimeout(function() {
      b.hide();
    }, delay);
  }
  a.mouseenter(showTip).mouseenter(stopHide).mouseleave(startHide);
  b.mouseenter(stopHide).mouseleave(startHide);
});

div {
  border: 2px dashed firebrick;
  float: left;
  font-size: 50pt;
  font-weight: bold;
  padding: 5px;
  margin: 5px;
}

#B {
  display: none;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='A'> A </div>
<div id='B'> B</div>

Previously at http://jsfiddle/92jbK/1/

You code is wrong :) Try this:

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #AAA, #BBB {
            width:100px;
            height:100px;
            border:1px solid #000;
        }
    </style>
</head>
<body>
    <div id="BBB">
        BBB
    </div>
    <div id="AAA">
        AAA
    </div>
    <script src="http://www.google./jsapi"></script>
    <script>
        //VISIBLE 
        function hide() {
            $("#BBB").css({'display':'none'});
        }
        function show() {
            $("#BBB").css({'display':'block'});
        }

        // Load jQuery
        google.load("jquery", "1");
        google.setOnLoadCallback(function() {
            // NOT VISIBLE
            // function hide() {
            //     $("#BBB").css({'display':'none'});
            // }
            // function show() {
            //     $("#BBB").css({'display':'block'});
            // }

            $(document).ready(function() {
                var time;

                $("#AAA").each(function() {
                    $(this).mouseover(function() {
                        show();
                    });

                    $(this).mouseleave(function() {
                        time = setTimeout("hide()", 200);
                    });

                    $("#BBB").mouseleave(function() {
                        setTimeout("hide()", 200);
                    });

                    $("#BBB").mouseenter(function() {
                        clearTimeout(time);
                    });
                });
            });


        });
    </script>
</body>
</html>

one alternative is to use jquery's tooltip http://flowplayer/tools/tooltip/index.html

then you can just do for example:

$('#A').live(function() {
      $(this).tooltip({
      relative: true,
      position: 'top center',
      delay: 200,
      effect: !$.browser.msie ? 'fade' : 'toggle',
      fadeInSpeed: 100,
      fadeOutSpeed: 50,
      predelay: 500
    });
  });

and you just make div b of class tooltip

Is time declared outside all of this?

It is not in the same scope in the two functions you have it in above, so is not the same variable so the clearTimeout() call has no effect.

Declare it outside both with var time;, so that they refer to the same variable.

本文标签： javascriptCancel setTimeout if mouse is over divStack Overflow