Question

我正在使用这个html代码作为我的按钮：

<a id="my-button" class="btn" name="my-button" href="#">
<span>Some text</span>
</a>

我的按钮实际上由CSS中定义的两个图像组成（我使用精灵CSS）：

.btn {
    background-image: url(images/btn-left.png);
}

.btn:hover {
    background-position:0 -27px;
}

.btn span {
    background-image: url(images/btn-right.png);
}

.btn span:hover {
    background-position:0 -27px;
}

我可以在跨度中放置任何大小的文本。当我超过跨度时，左右按钮被修改，但是当我只是悬停一个标签（几个像素的图像）时，只有左按钮被更改，而不是正确...

当我悬停标签时，如何更改范围样式？

Answer 1

我不确定你为什么需要跨度？为什么不使用一个精灵图像，所以你只需要加载一个图像，并有类似的东西：

<a class="btn" name="my-button" href="#">
Some text
</a>

并使用CSS处理悬停状态。

.btn {
   width: xxx;
   height: xxx;
   background-image: url(images/btn-left.png);
   background-position:top; /* use one long image with both states for active and    hover */
   display:block;
}
.btn:hover {
  background-position:bottom; /* moves the image down on hover to the lower part of the image */
}

我做了一个小例子，显然只是使用颜色而不是图像。看看：http://jsfiddle.net/kkj8n/

只需将背景颜色切换为图像，然后使用背景位置来操作位置变化。

Answer 2

这样写：

.btn:hover {
    background-position:0 -27px;
}
.btn:hover span{
    background-position:0 -27px;
}

OR

如果背景位置相同，那么写一下：

.btn:hover, .btn:hover span {
        background-position:0 -27px;
    }

两个图像上都使用CSS精灵

2 个答案: