CODEWITHSUNDEEP
htmljquery
Narazana
Narazana

Reputation: 1950

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

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>

Upvotes: 5

Views: 12840

Answers (6)

Ramesh
Ramesh

Reputation: 1887

$(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();
        }
    );
}

Upvotes: 0

codez
codez

Reputation: 1391

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>

Upvotes: 0

abelito
abelito

Reputation: 1104

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

Upvotes: 2

Gert Grenander
Gert Grenander

Reputation: 17104

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.

Upvotes: 0

codez
codez

Reputation: 1391

<!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>

Upvotes: 0

user113716
user113716

Reputation: 322592

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

Upvotes: 2

Related Questions