Question

Web Developer is showing my JavaScript as being valid, but if I run the page this does not work. I tried following the usage on jquery-color’s site, but it kept returning property id missing everytime. I really wish when I took JavaScript in college that I had a better instructor. He flashed through jQuery and most of JavaScript as a whole without really teaching it.

Edit #1: I fixed the (this) error in the code, but still a no go.

Here is the code for the jQuery:

<script type="text/javascript">
        jQuery("li.site-links").hover(function(){
            jQuery(this).stop().animate({
                backgroundColor: "#000000"
            }, 1000 );
        });
    </script>

and site link: http://lab.nmjgraphics.com

Answer 1

Try this:

jQuery(function(){
   jQuery("a.site-links").hover(function(){
        jQuery(this).closest('li').stop().animate({
            backgroundColor: "#000000"
        }, 1000 );
    },function(){
        jQuery(this).closest('li').stop().animate({
        backgroundColor: "transparent"
    }, 1000 );
    });
 });

You can either try with .parent('li')

or try this:

jQuery(function(){
   jQuery("a.site-links").parent('li').hover(function(){
        jQuery(this).stop().animate({
            backgroundColor: "#000000"
        }, 1000 );
    },function(){
        jQuery(this).closest('li').stop().animate({
        backgroundColor: "transparent"
    }, 1000 );
    });
 });