JQuery Hover效果的嵌套类

Question

我有一个HTML代码，如下所示

<div class="homepage">
        <section class="hp-top">
            <div class="container">
                <div class="userMenu">
                        <ul>
                            <li><a href="#" class="home"><span></span></a></li>
                            <li><a href="#" class="News"><span></span></a></li>
                            <li><a href="#" class="about"><span></span></a></li>
                            <li><a href="#" class="contactus"><span></span></a></li>
                        </ul> ......

我的JQuery如下

$(function() {
    // set opacity to nill on page load
    $(".homepage .hp-top .container .userMenu span").css("opacity","0");
    // on mouse over
    $(".homepage .hp-top .container .userMenu span").hover(function () {
        // animate opacity to full
        $(this).stop().animate({
            opacity: 1
        }, 'slow');
    }

最后只是为了给出一个清晰的想法，我也给了我的CSS

    .homepage .hp-top .container .userMenu {
        width:80%;
        height:102px;
        background:url('../Images/backgroudHeader.png') repeat-x;
        list-style:none;
        margin:0;
        padding:0;
        padding-top:5px;
        padding-bottom: 20px;
        padding-left:20%;
    }/* Float LI Elements - horizontal display */
.homepage .hp-top .container .userMenu li {
        float:left;
        }
        /* Link - common attributes */

.homepage .hp-top .container .userMenu li a {
        background:url('../Images/MenuSprite.png') no-repeat scroll top left;
        display:block;
        height:80px;
        position:relative;
    }

.homepage .hp-top .container .userMenu li a.home {
        width:159px;
    }

.homepage .hp-top .container .userMenu li a.portfolio {
        width:157px;
        background-position:-159px 0px;
    }
.homepage .hp-top .container .userMenu li a.about {
        width:159px;
    }

.homepage .hp-top .container .userMenu li a.contactus {
        width:157px;
        background-position:-159px 0px;
    }

.homepage .hp-top .container .userMenu li a span {
        background:url('..Images/MenuSprite.png') no-repeat scroll bottom left;
        display:block;
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        z-index:100;
    }
.homepage .hp-top .container .userMenu li a span:hover {
        cursor:pointer;
    }

.homepage .hp-top .container .userMenu li a.home span {
        background-position:0px -81px;
    }

.homepage .hp-top .container .userMenu li a.portfolio span {
        background-position:-159px -81px;
    }

.homepage .hp-top .container .userMenu li a.about span {
        background-position:0px -81px;
    }

    /* Shift background position on hover for the class: "contac" */
.homepage .hp-top .container .userMenu li a.contactus span {
        background-position:-159px -81px;
    }

我在JQuery悬停选项中遇到问题。当我尝试使用

时

$(".homepage .hp-top .container .userMenu span").css("opacity","0");

它不起作用......但通常情况下，没有嵌套的类它工作正常。我在这做什么错...请帮忙。