On this page you will see my page. I made have a menu. I wanted to make it more clear that this menu is a menu by highlighting the links on hover. While I normally would use JavaScript, jQuery sounded more simple to implement since it has .hover. So to highlight the elements from the list, I added this script:

<script>
    $("li").hover(
        function(){
            $(this).css("background-color", "#525252");
        },
        function() {
            $(this).css("background-color", "#FFF");
        }
    );
</script>

In my understanding of jQuery, the first function embedded in the hover() function is run when the user is hovering over the li-element. The second function is run when the mouse leaves the li-element. jQuery API-link. The added script however doesn't seem to do anything at all.

My first try was to change the first line

$("li")

because this might not be the correct approach. This because it is a ul li so I tried ul li instead of just li.

The second solution was to use addClass but to make another class sounded a bit redundant to me. So I decided to not use this.

Last I tried to add an alert to see if the code is ran at all on hover. This is the case. When I added an alert in the code and hovered over the li-element the alert was not triggered. So to my understanding the faulty code is only one line:

$("li").hover()

But I haven't found what exactly is faulty here.

The HTML code for the menu is the following:

<div id="menu">
    <ul>
        <li><strong><em><u>Main Menu</u></em></strong></li>
        <li onclick="moveDiv('home');">Home</li>
        <li onclick="moveDiv('profile')">Profile</li>
        <li onclick="moveDiv('news')">News</li>
        <li onclick="moveDiv('forums')">Forums</li>
        <li onclick="moveDiv('webshop')">Web Shop</li>
        <li onclick="moveDiv('status')">Status</li>
    </ul>
</div>

CSS sheet:

#menu ul li {
    list-style-type: none;
    margin-top: 10px;
    clear: left;
    cursor: pointer;
}
#menu ul {
    margin: 0px;
    padding: 0px;
    color: #525252;
}

#menu ul li a {
    text-decoration: none;
    color: #525252;
}

On this page you will see my page. I made have a menu. I wanted to make it more clear that this menu is a menu by highlighting the links on hover. While I normally would use JavaScript, jQuery sounded more simple to implement since it has .hover. So to highlight the elements from the list, I added this script:

<script>
    $("li").hover(
        function(){
            $(this).css("background-color", "#525252");
        },
        function() {
            $(this).css("background-color", "#FFF");
        }
    );
</script>

In my understanding of jQuery, the first function embedded in the hover() function is run when the user is hovering over the li-element. The second function is run when the mouse leaves the li-element. jQuery API-link. The added script however doesn't seem to do anything at all.

My first try was to change the first line

$("li")

because this might not be the correct approach. This because it is a ul li so I tried ul li instead of just li.

The second solution was to use addClass but to make another class sounded a bit redundant to me. So I decided to not use this.

Last I tried to add an alert to see if the code is ran at all on hover. This is the case. When I added an alert in the code and hovered over the li-element the alert was not triggered. So to my understanding the faulty code is only one line:

$("li").hover()

But I haven't found what exactly is faulty here.

The HTML code for the menu is the following:

<div id="menu">
    <ul>
        <li><strong><em><u>Main Menu</u></em></strong></li>
        <li onclick="moveDiv('home');">Home</li>
        <li onclick="moveDiv('profile')">Profile</li>
        <li onclick="moveDiv('news')">News</li>
        <li onclick="moveDiv('forums')">Forums</li>
        <li onclick="moveDiv('webshop')">Web Shop</li>
        <li onclick="moveDiv('status')">Status</li>
    </ul>
</div>

CSS sheet:

#menu ul li {
    list-style-type: none;
    margin-top: 10px;
    clear: left;
    cursor: pointer;
}
#menu ul {
    margin: 0px;
    padding: 0px;
    color: #525252;
}

#menu ul li a {
    text-decoration: none;
    color: #525252;
}

• javascript
• jquery
• html
• css

• post your css. so we can have a look. – Kees Sonnema Commented Jun 6, 2013 at 13:27
• By the way, wrap all your jquery in $(function() { YOUR CODE GOES HERE });. Read more here. – David Sherret Commented Jun 6, 2013 at 13:29

5 Answers 5

Use CSS instead:

li:hover {
    background-color:#525252
}

Like others said, wait for the DOM to finish loading. You can put the script at the end of the page, or a more robust solution would be to wrap your code in $(document).ready() function, like so:

$(document).ready(function () {
    $("li").hover(function () {
        $(this).css("background-color", "#525252");
    }, function () {
        $(this).css("background-color", "#FFF");
    });
});

You don't need the overhead of something like jQuery for this. CSS has some behavioural features through it's pseudo classes: http://jsfiddle/T4aNf/

HTML

<ul id="menu">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
</ul>

CSS

#menu li a {
    background: red;
}
#menu li a:hover {
    background: green;
}

Wait for the DOM to be ready or put your script just before closing body tag:

(I checked your source code and, yes, this is your problem. You are setting it in head section.)

$(function () {
    $("li").hover(

    function () {
        $(this).css("background-color", "#525252");
    },

    function () {
        $(this).css("background-color", "#FFF");
    });
});

You are calling your JavaScript code before the DOM finishes loading. Wrap your JavaScript like this:

<script>
    $(function(){
        $("li").hover(
            function(){
                $(this).css("background-color", "#525252");
            },
            function() {
                $(this).css("background-color", "#FFF");
            }
        );
    });
</script>

$() is a shorthand for jQuery's ready function.