Home/ Questions/Q 8891861
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T22:50:49+00:00

Hoverintent is not working when I apply to an html page. Help! On jsfddle

  • 0

Hoverintent is not working when I apply to an html page. Help!
On jsfddle it works but testing it on html page does not work.

Works here:
http://jsfiddle.net/GZV5V/3/

Does not work on .html page (below code is same as http://jsfiddle.net/GZV5V/3/)

<html>

    <head>
        <style type="text/css">
            #nav {
                padding: 40px;
                border: solid #999 1px;
            }
            #nav ul {
                margin: 0;
                padding: 0;
                display: none;
                background-color: #CCC;
            }
            #nav ul li {
                margin: 0;
                list-style: none;
                list-style-type: none;
                padding: 5px;
                width: 40px;
            }
            #nav a {
                color: black;
                text-decoration: none;
                padding: 5px;
            }
            #nav a:hover {
                text-decoration: none;
                background-color: yellow;
            }
            ​
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
        <script>
            var config = {
                over: function() { //onMouseOver callback (REQUIRED) 
                    $('ul', this).slideDown(250); //show its submenu

                },
                timeout: 500, // milliseconds delay before onMouseOut  (default 0)  
                out: function() { // function = onMouseOut callback (REQUIRED)
                    $('ul', this).slideUp(500); //hide its submenu        
                }
            };
            $('#nav li').hoverIntent(config);​
        </script>
    </head>

    <body>
        <ul id="nav">
            <li><a href="#">Main</a>

                <ul>
                    <li><a href="#">AAAAA</a>
                    </li>
                    <li><a href="#">BBBBB</a>
                    </li>
                    <li><a href="#">CCCCC</a>
                    </li>
                    <li><a href="#">DDDDD</a>
                    </li>
                    <li><a href="#">FFFFF</a>
                    </li>
                </ul>
            </li>
        </ul>
    </body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The DOM hasn’t loaded yet. Wrap your code in a $(document).ready:

    $(document).ready(function () {
    var config = {    
        over: function () { //onMouseOver callback (REQUIRED) 
            $('ul', this).slideDown(250);//show its submenu
        },    
        timeout: 500, // milliseconds delay before onMouseOut  (default 0)  
        out: function () { // function = onMouseOut callback (REQUIRED)
            $('ul', this).slideUp(500); //hide its submenu        
        }     
    };
    $('#nav li').hoverIntent(config);​
});

    You’ve configured JSFiddle to run your code onLoad (see the configuration under “framework”). That’s why it works in the fiddle.

    • 0