设置扩展按钮的悬停状态

Question

我制作了一个水平展开的按钮：http://jsfiddle.net/timkl/TsDud/

但是我很难让按钮的悬停状态正常工作。

这是我的标记：

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

我不知道如何设置悬停效果的样式，以便当用户将鼠标悬停在<span>未覆盖的按钮部分上时整个按钮被“点亮”。

当我将鼠标悬停在<span>未涵盖的部分按钮上时，这就是我所得到的：

点击我的示例：http://jsfiddle.net/timkl/TsDud/

Answer 1

您可以将悬停规则更改为仅适用于a.action-button目前，您拥有a.action-button及其范围的样式规则。

a.action-button:hover { ...

和

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

而是尝试以这种方式应用它：

a.action-button:hover { ...

和

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

不适用于某些旧版本的IE。

http://jsfiddle.net/HZpDL/

Answer 2

<强> jsFiddle DEMO HERE

将最后一行更改为：

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

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

仅使用一张图片，例如在悬停上只需将background-position“更改”为代表您想要的状态的图像部分！ 它将为您保存“按钮消失”，直到加载新图像。