Question

我正在整理一个水平下拉菜单。使用单个PNG css sprite（使用background-position: -x -y）时，每个按钮都会在翻转时发生变化。

我的下拉列表工作正常hoverIntent.js，但我不知道如何突出显示与我正在盘旋的子菜单对应的菜单项。

CSS

#navigation-main {
    background: url(../images/navigation-main.png) repeat-x;
    height: 54px;
}

#navigation-main ul {
    width: 960px;
    margin: 0 auto;
    height: 54px;
    list-style: none;

}

#navigation-main ul li {

    display: inline;
    position: relative;

}

#navigation-main ul div {

    display: none;

}

#navigation-main ul li div {

    border-right-style: solid;

    border-left-style: solid;

    border-bottom-style: solid;

    border-color: #2386D8;

    border-right-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 1px;

    position: absolute;
    padding: 10px;
    margin: 0 0 0 1px;

    width: 300px;
    top: 54px;
    background: #113E5F;

}

#navigation-main ul li.hovering div {
    display: block;
}


#navigation-main ul li a {

    display: block;
    float: left;
    height: 54px;
    background: url(../images/navigation-sprite.png);
    text-indent: -9999px;
}


#navigation-main  ul li a.nav-home {
    width: 50px; background-position: 0px 0px;
}

#navigation-main  ul li a.nav-documents {
    width: 151px; background-position: -50px 0px;
}

#navigation-main  ul li a.nav-tools {
    width: 151px; background-position: -201px 0px;
}

#navigation-main  ul li a.nav-units {
    width: 151px; background-position: -352px 0px;
}

#navigation-main  ul li a.nav-social {
    width: 151px; background-position: -503px 0px;
}

#navigation-main  ul li a.nav-people {
    width: 151px; background-position: -654px 0px;
}

#navigation-main  ul li a.nav-learning {
    width: 153px; background-position: -805px 0px;
}

#navigation-main  ul li a.nav-home:hover {
    width: 50px; background-position: 0px -54px;
}



#navigation-main  ul li a.nav-documents:hover {
    width: 151px; background-position: -50px 54px;
}

#navigation-main  ul li a.nav-tools:hover  {
    width: 151px; background-position: -201px 54px;
}

#navigation-main  ul li a.nav-units:hover  {
    width: 151px; background-position: -352px 54px;
}

#navigation-main  ul li a.nav-social:hover  {
    width: 151px; background-position: -503px 54px;
}

#navigation-main  ul li a.nav-people:hover  {
    width: 151px; background-position: -654px 54px;
}

#navigation-main  ul li a.nav-learning:hover  {
    width: 153px; background-position: -805px 54px;
}

HTML

<div id="navigation-main" role="navigation">

            <ul>
                <li><a href="#" class="nav-home">Home</a></li>
                <li><!-- submenu example -->
                <div><h2>Title</h2>
                <p>A. Doc 1</p>
                <p>B. Doc 2</p>
                <p>C. Doc 3</p>
                <p>D. Doc 4</p>
                ...
                </div>
                <!-- END submenu  -->
                <a href="#" class="nav-documents ">Documents</a>
                </li>
                <li><a href="#" class="nav-tools">Tools</a></li>
                <li><a href="#" class="nav-units">Units</a></li>
                <li><a href="#" class="nav-social">Social</a></li>
                <li><a href="#" class="nav-people">People</a></li>
                <li><a href="#" class="nav-learning">Learning</a></li>
            </ul>
    </div><!-- navigation-main -->

JS - 用于悬停Intent

   <script type="text/javascript" charset="utf-8">
//<![CDATA[
    $(document).ready(function() {

      function addMega(){
        $(this).addClass("hovering");
        }

      function removeMega(){
        $(this).removeClass("hovering");
        }

    var megaConfig = {
         interval: 20,
         sensitivity: 4,
         over: addMega,
         timeout: 30,
         out: removeMega
    };


     $("#navigation-main ul li").hoverIntent(megaConfig)


    });


    //]]>
    </script>

作为奖励，此菜单必须在IE7上正确运行。

Answer 1

使用jQuery，当指针悬停在项目上时，您可以使用.addClass添加类似active-item的CSS类。同样，您可以使用.removeClass从其他项目中删除一个类。

在下拉列表中突出显示CSS精灵翻转

1 个答案: