Question

我有一个导航网格，我想使用精灵创建翻转。感谢网站上的其他提示，我设法开始了。

<ul id="navigation">
<li class="button_1"><a href="#" title="Go to the this page">Button text</a></li>
<li class="button_2"><a href="#" title="Go to the this page">Button text</a></li>
<li class="button_3"><a href="#" title="Go to the this page">Button text</a></li>
<li class="button_4"><a href="#" title="Go to the this page">Button text</a></li>
<li class="button_5"><a href="#" title="Go to the this page">Button text</a></li>
</ul>


#navigation{
display: block;
width: 907px;
height: 296px;
background: url(http://i.imgur.com/WbDp9lf.jpg) left top no-repeat;
}

#navigation li{
display: block;
float: left;
}

#navigation li a{
display: block;
height:296px;
text-indent:-9999px;
}

#navigation li a:hover,
#navigation li a.on{
background-image: url(http://i.imgur.com/WbDp9lf.jpg);
}

#navigation li.button_1 a {width:175px; background-position:0px 0px;}
#navigation li.button_1 a:hover {background-position:0px -296px;}
/*

问题是 - 导航是两行图标。如何控制只更改一个框。目前只能改变垂直组。

checking my jsfiddle will show it better i think.

谢谢！

Answer 1

这是你想要的吗？

http://jsfiddle.net/ahyv7/2/

我删除了很多无用的CSS ...剩下的（好的）是

#navigation {
    display: block;
    width: 907px;
    height: 296px;
}
#navigation li {
    display: block;
    float: left;
}
#navigation li a {
    display: block;
    height:148px;
    width: 181px;
    background: url(http://i.imgur.com/WbDp9lf.jpg) left top no-repeat;
    text-indent:-9999px;
    background-position:0px 0px;
}
#navigation li a:hover {
    background-position:0px -296px;
}

为了让你工作，你需要一个只有1个读取和1个灰色rectagle的精灵将width / height设置为正常的li a显示，并使用background-position:0px 0px，您只能看到红色矩形......在悬停时移动背景uppper ...全部

css精灵导航布局问题

1 个答案: