[英]CSS Sprite button (span in anchor?)
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. 我想使用CSS熟悉,我很熟悉。 However - since this text can vary soooo much, I can't really use 2 or 3 iterations of a "100px wide" button.
但是 - 由于这个文本可能变化太大,我不能真正使用“100px宽”按钮的2或3次迭代。 So I found a way to split the background with an A and SPAN.
所以我找到了一种用A和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/ 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? 有一种简单的方法可以解决这个问题吗?
Add another selector to style the span
based on its parent being hovered: 添加另一个选择器以根据其悬停的父级设置
span
的样式:
.readMore:hover span,
.readMore span:hover {
background-position: 0 -48px;
}
Now, if either the span
itself is hovered, or just the parent a.readMore
element is hovered over, it should look identical. 现在,如果
span
本身悬停,或者只是父a.readMore
元素悬停,它应该看起来相同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.