jQuery mouseover to show hidden div and to show div if only mouse still over the div

Question

I have a problem with my mouseover and mouseout functions. When I mouseover a link, it shows a hidden <div>, and when I mouseout of the div it hides the div. The problem is that if I mouseover a link, then I move mouse somewhere else which is not over the div, the div won't go away.

If I use the mouseout event of the link to set the visibility of the div, then I won't be able to hover on the div.

Here's my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            Untitled Document
        </title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#show_div").mouseover(function() {
                    $("#hello").css('visibility', 'visible');
                });

                $("#hello").mouseover(function() {
                    $("#hello").css('visibility', 'visible');
                });
                $("#hello").mouseout(function() {
                    $("#hello").css('visibility', 'hidden');
                });
            });
        </script>
    </head>

    <body>
        <br/>
        <br/>
        <br/>
        <br/>
        <a id="show_div" href="#">Link text</a>
        <div id="hello" style="visibility:hidden;">
            <ul>
                <li>
                    Coffee
                </li>
                <li>
                    Tea
                </li>
                <li>
                    Milk
                </li>
            </ul>
        </div>
        <br/>
        <br/>
    </body>    
</html>

Do you want the div to actually occupy space in the page when hidden, or appear over-top the page, like a ` — Nick Craver, Jun 26 '10 at 12:59
I think the div should appear on the top. Maybe, he can set z-index for that. — Tola, Jun 26 '10 at 13:48

abelito · Accepted Answer · 2010-06-26T13:27:17.083

2

I use a setTimeout function to change the css property. Set the interval of the setTimeout to ~333-500 milliseconds, and set the mouseover for the Div to clear the timeout. Then, on the mouseout of the div itself, set the timer again :)

Example/Answer:

// timer for hiding the div
var hideTimer;

// show the DIV on mouse over
$("#show_div").mouseover(function() {
    // forget any hiding events in timer
    clearTimeout( hideTimer );
    $("#hello").css('visibility', 'visible');
});

$("#hello").mouseover(function() {
    clearTimeout( hideTimer );
    $("#hello").css('visibility', 'visible');
});

// set a timer to hide the DIV
$("#show_div").mouseout(function() {
    hideTimer = setTimeout( hideHello, 333 );
});

$("#hello").mouseout(function() {
    hideTimer = setTimeout( hideHello, 333 );
});

// hides the DIV
function hideHello() {
    $("#hello").css('visibility', 'hidden');
}

edited Jun 26 '10 at 13:27

answered Jun 26 '10 at 12:50

abelito

1,094
1
7
18

I have editted my answer to provide you source code. I am not 100% about the jQuery portions because I use straight javascript, but the straight javascript should work :) If you have any questions about it, I will be more than happy to answer them for you. – abelito Jun 26 '10 at 13:04
abelito - The OP has the code running inside jQuery's `ready()` function, so you should perhaps point out that `hideHello()` will need to be in the global namespace, or you'll need to change the `setTimeout()` functions to receive the local reference to `hideHello` – user113716 Jun 26 '10 at 13:11
@abelito - Never ever, *ever* pass a string to `setTimeout()`, you can do `setTimeout(hideHello, 333 );` directly, which is both a) faster and b) eliminates *many* side-effects, exactly like @patrick is talking about. – Nick Craver Jun 26 '10 at 13:15
@patrick,Nick Craver - Duly noted, thank you guys for the knowledge. I have changed the code above to use hideHello . – abelito Jun 26 '10 at 13:37

score 2 · Answer 2 · answered Jun 26 '10 at 12:58

2

Place the entire thing in a container, and put the mouse events on that:

Try it out: http://jsfiddle.net/hGTPp/

HTML

<div id='container'>
    <a id="show_div" href="#">Link text</a>
    <div id="hello" style="visibility:hidden;">
        <ul>
            <li>
                Coffee
            </li>
            <li>
                Tea
            </li>
            <li>
                Milk
            </li>
        </ul>
    </div>
</div>

jQuery

$("#container").mouseover(function() {
    $("#hello").css('visibility', 'visible');
});
$("#container").mouseout(function() {
    $("#hello").css('visibility', 'hidden');
});

answered Jun 26 '10 at 12:58

user113716

318,772
63
451
440

2

+1 - This is the route I'd take, unless `display:none;` was an option, in which case you can simplify it even more: http://jsfiddle.net/hGTPp/2/ – Nick Craver Jun 26 '10 at 13:05
@Nick: +1 `toggle()` would be nicer if possible. – user113716 Jun 26 '10 at 13:07
@Bayonian - Not sure what difference it would make just because the `div` is addd dynamically, but anyway I don't actually have any trouble when I go back to your original code, and just add a `mouseout` to `show_div`. http://jsfiddle.net/SuqxY/ – user113716 Jun 26 '10 at 14:25
@Morron - Probably has to do with your CSS layout. If there's a margin applied perhaps. Is there a reason you can't wrap the `` and `
` in a container like I did in my answer above?
– user113716 Jun 26 '10 at 16:02

score 0 · Answer 3 · answered Oct 15 '14 at 13:30

$(document).ready(function()
{
    var timer;
    $("#show_div").hover(
        function ()
        {
            $('#hello').show();
        },
        function()
        {
            timer = setTimeout(function(){$('#hello').hide();}, 5000);
        }
    );

    $("#hello").hover(
        function ()
        {
            clearTimeout(timer);
        },
        function()
        {
            $('#hello').show();
        }
    );
}

Gert Grenander · Answer 4 · 2010-06-26T13:08:18.610

0

Use .hover() instead. It allows you to specify handlerIn and handlerOut events. E.g.

jQuery

<script type="text/javascript">
  $(document).ready(function() {
    $("#linkdiv").hover(function() {
      $("#hello").show();
    }, function() {
      $("#hello").hide();
    });
  });
</script>

HTML

<div id="linkdiv">
  <a id="show_div" href="#">Link text</a>

  <div id="hello" style="display: none;">
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
  </div>
</div>

Edit: Changed the code a bit after Nick's comment. Thanks Nick.

edited Jun 26 '10 at 13:08

answered Jun 26 '10 at 12:52

Gert Grenander

16,866
6
40
43

1

Actually they're `mouseenter` and `mouseleave` events...but the `
` isn't a *child* of the ``, so this won't work here.
– Nick Craver Jun 26 '10 at 12:53
As Nick indicated, to make this work, you need have them both in a container. You can alway hook up the event handler right after the DIV has been added. – Gert Grenander Jun 26 '10 at 13:59

score 0 · Answer 5 · answered Jun 26 '10 at 12:58

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            Untitled Document
        </title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#show_div").hover(
                  function(){
                    $('#hello').show();
                  },
                  function(){
                    $('#hello').hide();
                  });
            });
        </script>
    </head>

    <body>
        <br/>
        <br/>
        <br/>
        <br/>
        <div id="show_div">
            <a href="#">Link text</a>
            <ul id="hello" style="display:none;">
                <li>
                    Coffee
                </li>
                <li>
                    Tea
                </li>
                <li>
                    Milk
                </li>
            </ul>
        </div>
        <br/>
        <br/>
    </body>

</html>

score 0 · Answer 6 · answered Jun 26 '10 at 13:45

CSS solution:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
    #link{
      display:inline-block;
      overflow:hidden;
      height:20px;
    }
    #link:hover{
      height:auto;           
    }
  </style>
</head>
<body>
  <br />
  <div id="link">
    <a href="#">Link text</a>
    <ul>
      <li>
          Coffee
      </li>
      <li>
          Tea
      </li>
      <li>
          Milk
      </li>
    </ul>
  </div>
</body>
</html>

jQuery mouseover to show hidden div and to show div if only mouse still over the div

6 Answers6

Linked