1

だから私はリンクを持っています、それは何でもかまいません。

<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スプライトを使いたいです。ただし、このテキストは非常に変化する可能性があるため、「幅100ピクセル」ボタンを2〜3回繰り返すことはできません。そこで、AとSPANで背景を分割する方法を見つけました。それは素晴らしい働きをします！.............右隅だけがホバー状態をアクティブにする、右端にホバーしない限り。ここにフィドルを設定してお見せします。

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

中央にカーソルを合わせると、美しく機能します。右端にカーソルを合わせると、それほどセクシーに見えません。

私が見落としているこれを改善する簡単な方法はありますか？

4

1 に答える 1

3

spanホバーされている親に基づいてスタイルを設定する別のセレクターを追加します。

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

JSフィドルデモ。

これで、spanそれ自体にカーソルを合わせるか、親a.readMore要素だけにカーソルを合わせると、同じように見えるはずです。

于 2012-08-03T20:15:20.237 に答える