Question

我有一个完美的html / css精灵导航。当其无序列表中的每个链接悬停时，背景精灵图像会按预期更改，以用于特定的

项目。我想根据链接的

覆盖整个导航精灵移动位置，这样任何一个链接的效果都会改变整个无序列表的背景。

原因：每个内联的边缘

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

块背景并不是工作得很好。改变整个背景将适应并完美地工作。

目前正在使用的代码：

CSS：

#nav {
    position: relative;
    float: right;
    background: url('../gfx/nav.gif');
    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;
}

#n1 a:hover {
    background: transparent url('../gfx/nav.gif') 0 -23px no-repeat;
}

#n2 a:hover {
    background: transparent url('../gfx/nav.gif') -74px -46px no-repeat;
}

#n3 a:hover {
    background: transparent url('../gfx/nav.gif') -167px -69px no-repeat;
}

#n4 a:hover {
    background: transparent url('../gfx/nav.gif') -292px -92px no-repeat;
}

#n5 a:hover {
    background: transparent url('../gfx/nav.gif') -375px -115px no-repeat;
}

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 - 根据要求，当前系统出现在jsfiddle - http://jsfiddle.net/NhL7E/

上

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

在收到标记后添加

感谢Shive，Jcubed和Barry Dowd。所有三个响应都是完全可以接受的，并且每个响应都达到了目标结果。然而，主要问题仍然是没有答案的 - 因为没有人建议使用HTML / CSS方法来移动整个背景图像精灵不同的增量，基于哪个链接被悬停。

如果我能将所有三个答案都标记为已接受，我会的。我选择标记Barry，因为这是我项目中最容易实现的答案。它不需要图形修改，所以我能够使用现有的精灵图像。所有答案都优于其他答案 - 使用jQuery减少http请求，使用更少的nav精灵，不需要JS / jQuery等等。

再次感谢大家 - 您的回复，jsfiddles，答案......非常感谢您帮助我的时间和精力！

CAS大全MSDS

Answer 1

你走了：

你给每个li左右边距为-4px（#n1只添加到右边距，＃n5只添加到左边距）然后你需要为每个li宽度添加8px（第一个和最后一个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 http://jsfiddle.net/NhL7E/12/

Answer 2

2解决方案：

首先，您可以更改图像，使其在导航的每个部分之间有额外的空间，并具有透明背景。 http://i60.tinypic.com/sq3xjn.png

这使您可以让每个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;
}

http://jsfiddle.net/gh6Aq/

其他选项是嵌套你的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>

然后：

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

然而，这种方法基本上会杀死导航的基础结构，因此我建议使用第一个选项。

Answer 3

从评论继续，我发布了一个基于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'
    });
});

我们获得的好处是，背景图片现在只加载一次，而不是5次，因为每次有人在图像上方悬停时，会再次加载。

在这里，我们只找到悬停元素的ID，并相应地重新定位ul的背景图片。

您在CSS中也不需要:hover的附加代码，因此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;
    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;
}

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

3 个答案:

JSFiddle Sample