Question

我可以创建按钮，使用在悬停和活动时更改的背景图像，并且活动状态是否显示延伸到锚点范围之外的图像？这是我的精灵：

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

Answer 1

您的意思是something like this吗？

锚点'活动时'展开'，但不会改变流量，因为它使用负边距使其实际上与以前相同。

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

使用此方法无需JavaScript。

Answer 2

这就是我想出的：DEMO

它只是将背景图像放在<li>上。不确定这是否正是您正在寻找或不是。

Answer 3

这是一个难以解释的问题！我所做的是让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;
}

显示链接边界外的按钮图像

3 个答案: