1

我想要做的是有一个精灵作为我的链接的背景。然后，当它悬停时，它会变成不同颜色的精灵。下面的代码实现了这一点。

问题是精灵直接在链接文本的上方/后面。有没有办法定位精灵相对于文本的显示位置？

如果我更改background-position它只会更改用于精灵的像素，而不是精灵的实际位置。提前致谢！

HTML

<a class="sprite-link" href="#">Link Text</a>

CSS

a:hover {
color: black;
}

.sprite-link {
background: url(spriteurl.png) no-repeat;
background-position: 0px 0px;
width: 165px;
height: 45px;
display: block;
}

.sprite-link:hover {
background: url(spriteurl.png) no-repeat;
background-position: 0px -45px;
width: 165px;
height: 45px;
}
4

3 回答 3

1

您可以使用::after伪元素来实现...

检查小提琴。

我没有精灵，但想象一下例子中的正方形就是它。

CSS

.sprite-link::after {
    content: "";
    padding: 10px;
    background: red;
    width: 165px;
    height: 45px;
    display: block;
}

.sprite-link:hover::after {
    width: 165px;
    height: 45px;
    background: black;
}
于 2013-09-07T00:41:13.257 回答
1

您可能想要做的是在 a 标签内使用单独的跨度，并将背景放在上面。

HTML

<a class="sprite-link">
    <span></span>
    Link Text
</a>

CSS

a:hover {
    color: black;
}

.sprite-link > span {
    background: url(spriteurl.png) no-repeat;
    background-position: 0px 0px;
    width: 165px;
    height: 45px;
    display: inline-block;
}

.sprite-link:hover > span {
    background: url(spriteurl.png) no-repeat;
    background-position: 0px -45px;
}
于 2013-09-07T00:41:30.500 回答
0

使用绝对定位的伪元素并将精灵放在伪元素内。

例如（见小提琴）：

a { position: relative; padding-right: 30px; display: inline-block;}
a:before { content:""; border: 1px solid #000; display: inline-block; position: absolute; width: 20px; height: 20px; right:0; }

http://jsfiddle.net/XJZfC/

于 2013-09-07T00:36:58.380 回答