在边框上应用背景-Javascript/CSS HTML-导航栏 JAVASCRIPT

悬停状态下的地面正好在边界之间，我想在这里实现的是，它也应该应用于边界上。

试试看

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

及

演示：

---

下面是您提供的一些代码（供任何人使用）：在悬停时，在边框上使用与背景ike相同的颜色。onHoverMain{background color:#ffff；border color:#ffffff；}

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;
}

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

$(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;
}

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