CODEWITHSUNDEEP
jqueryhtmlhover
Arnold
Arnold

Reputation: 37

Why won't hover work over the first item

I try to use the jQuery hover() method on a unsorted list which is situated in a div. When entering the mouse over one of the list-items there is no reaction, but when moving it over a second one, the reaction is as programmed (underline). If I then move back to the first item, it also reacts as programmed, so why didn't it do so the first time? The same problem occurs if I use div's instead of li's, or when I add a preventDefault() to the jQuery methods. I've seen the solutions on the question hover not working for items in list but they won't work either.

Here's the html-code:

<div id="div1">
    <ul>
        <li id="res0">first line</li>
        <li id="res1">second line</li>
        <li id="res2">third line</li>
    </ul>
</div>

and the script:

$("#div1").hover(function() {

    $("#res0").hover(function() {
        $(this).css("text-decoration","underline");
        document.body.style.cursor="pointer";
    }, function(){
        $(this).css("text-decoration","none");
        document.body.style.cursor="default";
    });

    $("#res1").hover(function() {
        $(this).css("text-decoration","underline");
        document.body.style.cursor="pointer";
    }, function(){
        $(this).css("text-decoration","none");
        document.body.style.cursor="default";
    });

    $("#res2").hover(function() {
        $(this).css("text-decoration","underline");
        document.body.style.cursor="pointer";
    }, function(){
        $(this).css("text-decoration","none");
        document.body.style.cursor="default";
    });
});

I would be very grateful if someone can tell me what goes wrong!

Here's the url: http://www.arcro.nl/tests/test3.php

Upvotes: 1

Views: 99

Answers (3)

Donnie D&#39;Amato
Donnie D&#39;Amato

Reputation: 3940

Just going to answer why it wont work over the first item since someone else answered with code. You are assigning the event handlers to the lis when hovering the parent div. Since they don't have events yet until hover and the hover was triggered on both the div and li, the event only fires on the div. I'm confident if you came into this structure with your mouse from the bottom, the third li wouldn't show the effect either. You typically wont need to assign event handlers on user action, you just assign the action after the element is loaded in the DOM.

Upvotes: 0

codernize
codernize

Reputation: 71

first of all, doing with js is WRONG! You can do it very easy with css. 

#res:hover {
    text-decoration:none;
}

As for an answer for you question, you have the hover bindings inside the main hover binding. Not sure, but that generates some sort of conflict. If you want to do it that way, just put all 'li' hovers at top and not inside main hover function.

Upvotes: 2

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

You can reduce your code like this,

$("#div1 li").hover(function () {
    $(this).css("text-decoration", "underline");
    document.body.style.cursor = "pointer";
}, function () {
    $(this).css("text-decoration", "none");
    document.body.style.cursor = "default";
});

Fiddle

Upvotes: 5

Related Questions