Javascript JQuery悬停效果的嵌套类

我有一个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> ......

最后，为了给大家一个清晰的概念，我也给出了我的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");

---

它不起作用。。。但通常情况下，如果没有嵌套类，它就可以正常工作。我怎么会在这里。。。请帮忙。

我想。。您能否详细说明如何复制非工作部件？我看到图像在悬停时被更改，代码中没有任何更改。您期望什么？除了例子之外，还有别的吗？

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