jquery - CSS Sprite 按钮（在锚点中跨度？）

Question

所以我有一个链接，它可以是任何东西。

<a href="http://www.domain.com/page" class="readMore">
    <span>Read More</span>
<a>

或者

<a href="http://www.domain.com/page" class="readMore">
    <span>You should REALLY click this button!</span>
</a>

我想使用我熟悉的 CSS 精灵。但是 - 由于此文本可能变化很大，我不能真正使用“100px 宽”按钮的 2 或 3 次迭代。所以我找到了一种用 A 和 SPAN 分割背景的方法。效果很好！......除非您将鼠标悬停在最右侧，否则只有右上角会激活悬停状态。我在这里设置了一个小提琴给你看。

http://jsfiddle.net/demchak_alex/qkQQy/

将鼠标悬停在中心上，效果很好。将鼠标悬停在最右侧，它看起来并不那么性感。

有没有一种简单的方法可以解决我忽略的问题？

Answer 1

添加另一个选择器以span根据其悬停的父级设置样式：

.readMore:hover span,
.readMore span:hover {
    background-position: 0 -48px;
}

JS 小提琴演示。

现在，如果它span本身悬停，或者只是父a.readMore元素悬停，它应该看起来相同。