-1

HTML - 导航栏

<div id="navBar">
    <ul class="navBarWidth navBarMain"> 
        <li class="borderRight onSelect"><a href="#">LINK 1</a></li>
        <li class="borderRight borderLeft"><a href="#">LINK 2</a></li>
        <li class="borderRight borderLeft"><a href="#">LINK 3</a></li>
        <li class="borderRight borderLeft"><a href="#">LINK 4</a></li>
    </ul>
    <ul class="navBarExtended">
        <li class="borderLeft"><a href="#">EXTRA LINK</a></li>
    </ul>
</div>

CSS - 以下是应用的样式

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
 padding: 0;
 margin: 0;
 font-size: 100%;
 font-weight: normal;
}
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0; }
ol { padding-left: 1.4em; list-style: none; }
ul { padding-left: 1.4em; list-style:none; }
q:before, q:after { content:''; }

#navBar{
    width: 100%;
    position: absolute;
    line-height: 50px;
    background: -moz-linear-gradient(top,  #0088FF,  #0066BF);
}
.navBarWidth{
    width: 960px;
    margin: 0 auto;
}
.borderRight{
    border-right: 1px solid #005FB3;
    text-shadow: -1px -1px #0061B6;
}
.borderLeft{
    border-left: 1px solid #4CACFF;
    text-shadow: -1px -1px #0061B6;
}
#navBar li{
    float: left;
    }

.navBarMain  li a{
    display: inline-block;
    vertical-align: top;
    color: #ffffff;
    font-size: .8em;
    text-decoration: none;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    }
.navBarExtended  li a{
    display: inline-block;
    vertical-align: top;
    color: #ffffff;
    font-size: .8em;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    }


.onHoverMain{
    background-color: #3D3C3C;
    text-shadow: none;
    box-shadow: inset 0 0 16px #000000;
    }

.navBarExtended li a:hover{
    text-decoration: underline;
}

.onSelect{
    border-left: 1px solid #005FB3; 
    background-color: #242424;
    text-shadow: 0px 1px #000000;
    box-shadow: inset 0 0 16px #000000;
}

JAVASCRIPT

$(function() {
        $("ul.navBarMain li:not(.onSelect) a").hover(
            function(){
                $(this).addClass("onHoverMain");
            },
            function(){
                $(this).removeClass("onHoverMain");
        });
    });

悬停时的免费就在边界之间，我想在这里实现的是它也应该应用在边界上。

4

2 回答 2

2 
$(function() {
    $("ul.navBarMain li:not(.onSelect) a").hover(
        function(){
            $(this).addClass("onHoverMain");
        },
        function(){
            $(this).removeClass("onHoverMain");
        });
});

演示

于 2013-03-20T05:32:45.750 回答
0

尝试

$(function() {
    $("ul.navBarMain li:not(.onSelect)").hover(
        function(){
            $(this).addClass("onHoverMain");
        },
        function(){
            $(this).removeClass("onHoverMain");
        });
});

和

.onHoverMain{
    background-color: #3D3C3C;
    border-color: #3D3C3C;
    text-shadow: none;
    box-shadow: inset 0 0 16px #000000;
}

演示：小提琴

于 2013-03-20T05:14:49.907 回答