Problem with hover event used on <a> and <li> tags [solved]

[Ark]

Hey guys ive got a strange issue with css and some jquery script(maybe it's just the html structure)...
this is what's happening:

When I hover the <a href="#"><li></li></a> shiit happens:

Code: Select all

<a href="#"><li></li></a>
<a href="#"><li></li></a>
<a href="#"><li></li></a>
<a href="#"><li></li></a>
<a href="#"><li></li></a>

And this is what should happen:


It does works like that when i'm hovering the

Code: Select all

<li><li>
<li><li>
<li><li>
<li><li>
<li><li>

this is the hover function in jquery:

Code: Select all

$("#inner-navbar ul li").hover(function(){
                        var $index=$(this).index();
                        var $width=99*$index;
                        var $height=75;
                        $(this).css("background","url(images/navbar-sprites.png) -"+$width+"px -"+$height+"px");
                    },function(){
                    var $index=$(this).index();                        
                        var $width=99*$index;
                        var $height=0;
                    $(this).css("background","url(images/navbar-sprites.png) -"+$width+"px -"+$height+"px");
                    });

IDK WTH is happening so could someone please guide me the correct way



Is there like a css rule that should be applied for not happening this?
Thanks for reading my whining!

[Winawer]

In your hover function, the index never changes because <li> is always the first (and only) child of <a>.

Code: Select all

<a href="#"><li></li></a>
<a href="#"><li></li></a>
<a href="#"><li></li></a>
<a href="#"><li></li></a>
<a href="#"><li></li></a>

I don't think that's allowed. It should be <li><a href="#"></a></li>.

[Ark]

OOOooohh yea that explains that.

The problem nesting the <a> inside <li> is that clicking it doesn't happens nething, it's like clicking just the <li> el.

Do you got another alternative?

Thanks by the way!

[Chris]

There is no other alternative. The way Winawer showed you is the way it is done and always has been done. Placing the anchor tag around a list item is not only incorrect markup but to my mind is unlogical. You have a list of links. Not a link of lists.

Is the whole navigation stored on one image?

Here's some really simple css:

Code: Select all

ul li {
    float: left;
    list-style: none;
}

ul li a {
    display: block;
    width: 100px;
    height: 75px;
}

ul li a:hover {
    background-position: 0px -75px;
}

[Ark]

Yes it's just one image. Thanks chris now it's working as it's supposed to, didn't knew I had to set the dimensions of the <a> also.