0

我可以创建按钮，使用在悬停和活动时更改的背景图像，并让活动状态显示超出锚点边界的图像吗？这是我的精灵：

https://dl.dropbox.com/u/7737304/menu-sprite1.png

精灵的上半部分是“悬停”，下半部分是“活动”。我在实心栏下方没有任何东西是可点击的链接，我不想设置宽度，因为菜单文本将设置在顶部并延伸到图像的左右边缘之外。

我试图将背景图像分配给父 li 标签，它适用于“悬停”，但我不能让它适用于“活动”。

有任何想法吗？

CSS

.navigation li:hover{
background: transparent url(../images/menu-sprite.png) center -86px no-repeat;
}
.navigation a{
color: #e8e8e8;
font-weight: bold;
text-transform: uppercase;
padding:0.5em 0.8em;
}
.navigation a:hover{
color: #fff;
}
.navigation a.active {
color: #fff;
}
4

3 回答 3

0

你的意思是这样的吗？

锚点在活动时会“扩展”，但不会改变流程，因为它使用负边距使其实际上与以前的大小相同。

所以：添加要扩展锚点的填充量，然后添加与负边距相同的量。（您确实需要锚是一个block或inline-block元素，否则它不能使用边距）

使用此方法不需要 JavaScript。

于 2012-06-21T14:14:54.327 回答
0

这就是我想出的：DEMO

它只是将背景图像放在<li>. 不确定这是否正是您正在寻找的东西。

于 2012-06-21T14:15:08.930 回答
0

这很难解释！我所做的是使a标签可点击，扩展li了标签，::after我可以在其中应用必要的样式以使其更改，但不能点击。

就像我说的，很难解释，但这里有一个演示：http: //jsfiddle.net/cchana/SgH5C/

这里有一些可以帮助你的 CSS：

.navigation li::after {
    background: transparent url('https://dl.dropbox.com/u/7737304/menu-sprite1.png') center -49px no-repeat;
    bottom: 0px;
    content: '';
    display: block;
    height: 31px;
    position: absolute;
    width: 100%;
}
.navigation li:hover::after {
    background: transparent url('https://dl.dropbox.com/u/7737304/menu-sprite1.png') center -130px no-repeat;
}
于 2012-06-21T14:20:27.897 回答