Css 设置扩展按钮的样式'；s悬停状态

我制作了一个水平展开的按钮：

然而，我很难让我的按钮的悬停状态正常工作

这是我的标记：

<a class="action-button" href="#"><span>Some text</span></a>

我不知道如何设置悬停效果的样式，以便当用户将鼠标悬停在按钮未被

覆盖的部分时，整个按钮都会“点亮”

这是当我将鼠标悬停在按钮未被

覆盖的部分时得到的结果：

---

查看我在这里的示例：

您可以将悬停规则更改为仅适用于

a.action-button

目前，您拥有a.action-button及其跨度的样式规则

a.action-button:hover { ...

a.action-button:hover { ...

及

相反，请尝试以这种方式应用它：

及

但是，在一些旧版本的IE上不起作用

将最后几行更改为：

a.action-button:hover > span

例：

正如我在上面的评论中所说的，尽量避免对按钮状态使用单独的图像

仅使用一个图像，例如，在悬停时，只需将

背景位置

更改为表示所需状态的图像部分！

---

它将保存“按钮消失”直到加载新图像。

您所说的扩展是什么意思？（美丽的按钮，我假设您是网页设计师！：）我建议您只加载一个.png图像，在该图像中放置所有：悬停选中和所有其他按钮设计，然后使用

背景位置

来“更改”按钮状态的图像。它将只加载一个将由浏览器缓存的图像。这样做会保留“悬停图像加载时间”，避免在加载悬停图像之前按钮消失。老实说，我更喜欢“最终”：悬停状态，如您提供的图像中所示！：）它更“奇特”和“不同寻常”！谢谢你帮我：）我肯定会用你的背景定位技巧。

a.action-button:hover span { ...

a.action-button:hover > span

a.action-button:hover > span{
    background: transparent url(http://dl.getdropbox.com/u/228089/action-button-left-hover.png) no-repeat;
    color: white;
}