CSS雪碧按钮（跨度在锚？）

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精灵，这是我很熟悉。但是 - 因为这个文本可以变化很多，所以我不能真正使用2个或3个“100px宽”按钮的迭代。所以我找到了一种用A和SPAN分割背景的方法。它效果很好！.............除非你悬停在右侧，只有右侧的角落激活悬停状态。我在这里设置了一个小提琴来向你展示。

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

将鼠标悬停在该中心和它精美的作品。将鼠标悬停在右侧，看起来不像性感。

有没有一种简单的方法可以弥补我忽略的这种情况？

Answer 1

添加另一个选择样式基于其母公司正在徘徊的span：

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

JS Fiddle demo。

现在，如果要么span本身被徘徊，要么只是父母a.readMore元素被悬空，它应该看起来完全相同。