Html 更改整个导航背景上的导航精灵，而不仅仅是一个链接

我有一个完美的工作html/css精灵导航。当无序列表中的每个链接悬停在上方时，对于特定的

项，背景精灵图像将按预期进行更改。我想使整个导航精灵移动位置基于链接

悬停的位置，这样任何一个链接的效果都会改变整个无序列表的背景

原因：每个内联

的边缘都不是垂直的，它们呈45度角，因此更改传统

块背景效果不佳。改变整个背景将适应和工作完美

当前使用的代码：

CSS:

以及HTML：

<ul id="nav">
 <li id="n1"><a href="./"><span>Home</span></a></li>
 <li id="n2"><a href="./?c=about"><span>About</span></a></li>
 <li id="n3"><a href="./?c=programmes"><span>Programmes</span></a></li>
 <li id="n4"><a href="./?c=grants"><span>Grants</span></a></li>
 <li id="n5"><a href="./?c=publications"><span>Publications</span></a></li>
</ul>

那么，如何使整个导航的背景精灵移动，垂直移动量取决于悬停在哪个链接上？假设这在没有任何JS的情况下都是可能的

谢谢。：）

PS-根据要求，当前系统显示在JSFIDLE上-

请注意，每个彩色链接的边缘在悬停时不会完全改变-因此希望移动整个UL背景，而不是单个LI背景

在标记为已回答后添加

谢谢希夫、杰库贝德和巴里·多德。所有三个回答都是完全可以接受的，并且每一个都达到了目标结果。然而，主要的问题仍然没有得到真正的回答——因为没有人提出一种只使用HTML/CSS的方法来改变整个背景图像精灵的不同增量，基于链接悬停的位置

如果我能把这三个答案都标为被接受，我会的。我选择标记Barry的，因为这是最容易在我的项目上实现的答案。它不需要图形修改，所以我可以使用现有的sprite图像。所有答案都比其他答案有好处——使用jQuery的http请求更少，另一个答案的nav sprite更小，并且不需要JS/jQuery。。。等等

再次感谢你们所有人——你们的回答、问题、答案。。。非常感谢您花时间和精力帮助我

Cas

2解决方案：

---

首先，您可以更改图像，使其在导航的每个部分之间有额外的空间，并具有透明的背景

这允许您使每个li都有自己的背景，这些背景会自行改变，而不会影响导航的其他部分的外观

#nav {
    position: relative;
    float: right;
    /*background: url('http://i59.tinypic.com/25tapoi.jpg');*/
    width: 498px;
    height: 23px;
    margin: 110px 2px 0 0;
    border: 0;
    padding: 0;
}

#nav li {
    position: absolute;
    top: 0;
    margin: 0;
    border: 0;
    padding: 0;
    list-style: none;
}

#nav li, #nav a {
    height: 23px;
    display: block;
}

#nav span {
    display: none;
}

#n1 {
    left: 0;
    width: 73px;
}
#n2 {
    left: 71px;
    width: 94px;
}

#n3 {
    left: 167px;
    width: 124px;
}

#n4 {
    left: 292px;
    width: 82px;
}

#n5 {
    left: 375px;
    width: 125px;
}



#n1 a{
    width:77px;
    background: transparent url(http://i60.tinypic.com/sq3xjn.png) 0 0 no-repeat;
}

#n1 a:hover{
    background-position:0 -23px;
}

#n2 a{
    width:102px;
    background: transparent url(http://i60.tinypic.com/sq3xjn.png) -77px 0 no-repeat;
}

#n2 a:hover{
    background-position:-77px -23px;
}

#n3 a{
    width:131px;
    background: transparent url(http://i60.tinypic.com/sq3xjn.png) -179px 0 no-repeat;
}

#n3 a:hover{
    background-position:-179px -23px;
}

#n4 a{
    width:89px;
    background: transparent url(http://i60.tinypic.com/sq3xjn.png) -310px 0 no-repeat;
}

#n4 a:hover{
    background-position:-310px -23px;
}

#n5 a{
    width:128px;
    background: transparent url(http://i60.tinypic.com/sq3xjn.png) -399px 0 no-repeat;
}

#n5 a:hover{
    background-position:-399px -23px;
}

---

其他选项是嵌套li的方式，使具有背景图像的元素是最深的元素，然后可以使用悬停状态更改其样式

例如：

<ul id="nav">
    <li id="n1"><a href="./"><span>Home</span></a>

        <li id="n2"><a href="./?c=about"><span>About</span></a>

            <li id="n3"><a href="./?c=programmes"><span>Programmes</span></a>

                <li id="n4"><a href="./?c=grants"><span>Grants</span></a>

                    <li id="n5"><a href="./?c=publications"><span>Publications</span></a>
                        <div class='backgroundElement'></div>
                    </li>
                </li>
            </li>
        </li>
    </li>
</ul>

---

但是，这种方法基本上破坏了导航的底层结构，因此我建议使用第一个选项。

如评论所述，我发布了一个基于jQuery（JavaScript）的解决方案，因为确切的问题是，我们在

ul

上有背景图像，我们将鼠标悬停在

ul>li>a

上，CSS中没有父选择器来操作父元素的CSS属性（在

ul

上的baclground图像）

然而，使用jQuery我们可以很容易地实现它。因此jQuery代码将是这样的

$('#nav >li>a').on('mouseenter', function() {
    var id = $(this).parent().attr('id');
    switch (id) {
        case 'n1':
            $(this).parent().parent().css({
                'background-position': '0 -23px'
            });
            break;
        case 'n2':
            $(this).parent().parent().css({
                'background-position': '-0 -46px'
            });
            break;
        case 'n3':
            $(this).parent().parent().css({
                'background-position': '0 -69px'
            });
            break;
        case 'n4':
            $(this).parent().parent().css({
                'background-position': '0 -92px'
            });
            break;
        case 'n5':
            $(this).parent().parent().css({
                'background-position': '0 -115px'
            });
            break;
    }
}).on('mouseout', function() {
    $(this).parent().parent().css({
        'background-position': '0 0'
    });
});

#nav {
    position: relative;
    float: right;
    background: url('http://i59.tinypic.com/25tapoi.jpg');
    width: 498px;
    height: 23px;
    margin: 110px 2px 0 0;
    border: 0;
    padding: 0;
}
#nav li {
    position: absolute;
    top: 0;
    margin: 0;
    border: 0;
    padding: 0;
    list-style: none;
}
#nav li, #nav a {
    height: 23px;
    display: block;
}
#nav span {
    display: none;
}
#n1 {
    left: 0;
    width: 73px;
}
#n2 {
    left: 74px;
    width: 94px;
}
#n3 {
    left: 167px;
    width: 124px;
}
#n4 {
    left: 292px;
    width: 82px;
}
#n5 {
    left: 375px;
    width: 125px;
}

这里我们得到的好处是，背景图像现在只加载一次，而不是5次，因为以前每次有人悬停在图像上时，都会再次加载

在这里，我们只需找到悬停元素的ID，并相应地重新定位

ul

的背景图像

CSS中的

：hover

也不需要额外的代码，因此CSS代码如下所示

$('#nav >li>a').on('mouseenter', function() {
    var id = $(this).parent().attr('id');
    switch (id) {
        case 'n1':
            $(this).parent().parent().css({
                'background-position': '0 -23px'
            });
            break;
        case 'n2':
            $(this).parent().parent().css({
                'background-position': '-0 -46px'
            });
            break;
        case 'n3':
            $(this).parent().parent().css({
                'background-position': '0 -69px'
            });
            break;
        case 'n4':
            $(this).parent().parent().css({
                'background-position': '0 -92px'
            });
            break;
        case 'n5':
            $(this).parent().parent().css({
                'background-position': '0 -115px'
            });
            break;
    }
}).on('mouseout', function() {
    $(this).parent().parent().css({
        'background-position': '0 0'
    });
});

#nav {
    position: relative;
    float: right;
    background: url('http://i59.tinypic.com/25tapoi.jpg');
    width: 498px;
    height: 23px;
    margin: 110px 2px 0 0;
    border: 0;
    padding: 0;
}
#nav li {
    position: absolute;
    top: 0;
    margin: 0;
    border: 0;
    padding: 0;
    list-style: none;
}
#nav li, #nav a {
    height: 23px;
    display: block;
}
#nav span {
    display: none;
}
#n1 {
    left: 0;
    width: 73px;
}
#n2 {
    left: 74px;
    width: 94px;
}
#n3 {
    left: 167px;
    width: 124px;
}
#n4 {
    left: 292px;
    width: 82px;
}
#n5 {
    left: 375px;
    width: 125px;
}

给你：

您为每个li提供一个-4px的左右边距（#n1仅添加到右边距，#n5仅添加到左边距） 然后，您需要将8px添加到每个li宽度（第一个和最后一个为4px） 然后将4px添加到li背景图像的左侧位置，使-74px变为-70px（将第一个保留为0）

新CSS

#nav {
    position: relative;
    float: right;
    background: url('http://i59.tinypic.com/25tapoi.jpg');
    width: 498px;
    height: 23px;
    margin: 110px 2px 0 0;
    border: 0;
    padding: 0;
}

#nav li {
    position: absolute;
    top: 0;
    margin: 0 -4px;
    border: 0;
    padding: 0 0px;
    list-style: none;
}
#nav li#n1 { 
    margin: 0 -4px 0 0; 
}

#nav li, #nav a {
    height: 23px;
    display: block;
}

#nav span {
    display: none;
}

#n1 {
    left: 0;
    width: 77px;
}
#n2 {
    left: 74px;
    width: 102px;
}

#n3 {
    left: 167px;
    width: 132px;
}

#n4 {
    left: 292px;
    width: 90px;
}

#n5 {
    left: 375px;
    width: 129px;
}

#n1 a:hover {
    background: transparent url('http://i59.tinypic.com/25tapoi.jpg') 0 -23px no-repeat;
}

#n2 a:hover {
    background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -70px -46px no-repeat;
}

#n3 a:hover {
    background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -163px -69px no-repeat;
}

#n4 a:hover {
    background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -288px -92px no-repeat;
}

#n5 a:hover {
    background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -371px -115px no-repeat;
}

---

JSFiddle

hi请提供一个JSFiddle.）完成了，湿婆。您好，我不确定是否有一个纯CSS解决方案，但您是否愿意使用jQuery之类的JavaScript库来实现最终结果？您好Shiva，我不太喜欢使用jQuery实现简单的导航效果。这更多的是装饰性的，而不是关键的功能。如果不可能不使站点膨胀，我宁愿保持导航静态。不过，如果您愿意发布？嗨，Jcubed，我很乐意查看您的解决方案并重新评估，我感谢您的思考和建议答案。特别是观察保持简单和干净，而不需要使用JS。然而，最终的结果是，导航项目之间的间隙增大，这严重破坏了整体设计，并使解决方案无法使用。我开始怀疑，也许z-index的使用是一种使外观和感觉有效的方法，尽管它还没有被考虑透。。。。！只是差距太大了吗？您应该能够在不破坏功能的情况下浏览并使用

left

属性，以便使导航与原始导航具有相同的宽度。由于时间的原因，我没能做到完全一样。或者是因为其他原因，它不起作用吗？谢谢Jcubed-point，是的，你是对的！谢谢。不用说，您也可以使用纯javascript实现上述结果。