css - 样式化扩展按钮的悬停状态

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

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“更改”为代表您想要的状态的图像部分! 在加载新图像之前，它将避免“按钮消失”。