ansaurus

Question

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

Answer 1

+1 A:

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

abelito 2010-06-26 12:50:51

Can you show me any sample? I'm a newbie.

Narazana 2010-06-26 12:53:02

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 2010-06-26 13:04:38

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`

patrick dw 2010-06-26 13:11:33

@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 2010-06-26 13:15:15

@patrick,Nick Craver - Duly noted, thank you guys for the knowledge. I have changed the code above to use hideHello .

abelito 2010-06-26 13:37:51

Thank you for comment and answer.

Narazana 2010-06-26 16:34:44

Answer 2

A:

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.

Gert G 2010-06-26 12:52:22

Actually they're `mouseenter` and `mouseleave` events...but the `<div>` isn't a *child* of the `<a>`, so this won't work here.

Nick Craver 2010-06-26 12:53:55

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 G 2010-06-26 13:59:16

Sorry.. I mixed up the first and third person in English. My English is not so good.

Angkor Wat 2010-06-26 15:33:36

Answer 3

+2 A:

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

patrick dw 2010-06-26 12:58:03

+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 2010-06-26 13:05:02

@Nick: +1 `toggle()` would be nicer if possible.

patrick dw 2010-06-26 13:07: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/

patrick dw 2010-06-26 14:25:25

As he stated in the question if he adds mouseout to show_div , the div will disappear immediately at the mouseout of the link. I try his code in with my PC with adding the mouseout to the show_div, the Div won't show up. I'm not sure why it the Div shows at http://jsfiddle.net/SuqxY/

Angkor Wat 2010-06-26 15:21:02

Sorry for confusing the first and the third person. My English is not so good.

Angkor Wat 2010-06-26 15:32:40

@patrick.. it's not working here. I'm sure why it works @ http://jsfiddle.net/SuqxY/

Narazana 2010-06-26 15:59:17

@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 `<a>` and `<div>` in a container like I did in my answer above?

patrick dw 2010-06-26 16:02:28

Answer 4

A:

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

    <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"&gt;
        </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>

codez 2010-06-26 12:58:59

Answer 5

A:

CSS solution:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>

codez 2010-06-26 13:45:48

ansaurus

tags:

views:

answers:

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

related questions