Question

So I’ve got a link, it can be anything.

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

or

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

I would like to use CSS sprites, which I’m familiar with. However – since this text can vary soooo much, I can’t really use 2 or 3 iterations of a “100px wide” button. So I found a way to split the background with an A and SPAN. it works great!………….Unless you hover over the very right side, where only the right corner activates the hover state. I’ve set up a fiddle here to show you.

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

Hover over the center and it works beautifully. Hover over the very right side, and it doesn’t looks quite as sexy.

Is there a simple way to remedy this that I’m overlooking?

Answer 1

Add another selector to style the span based on its parent being hovered:

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

JS Fiddle demo.

Now, if either the span itself is hovered, or just the parent a.readMore element is hovered over, it should look identical.