2

私が理解しているように、CSS を使用して要素の内容を:hover基本的な方法で変更できます。私はこのコードを使用しています

HTML:

<button><span>3 replies</span></button>

CSS:

button {width:6em}
button:hover span {display:none}
button:hover:before {content:"Reply!"}

しかし、ボタンの上にカーソルを合わせると、非常にひどくけいれんします

このリンクの音楽プレーヤーのようにスムーズにしたい

lease、premium、または価格の下にあるボタンのいずれかにカーソルを合わせると、テキストtrackoutに切り替わります。+add

ここに私のプレーヤーの一部があります http://djwckd.com/test

4

3 に答える 3

2

重要なことは、ホバー時にレイアウトが変更されないようにすることです。これを実現する最も簡単な方法は、ホバリングしていないときでも、すべてのパーツにレイアウト内のスペースを割り当てることです。あなたが達成しようとしているレイアウトの種類はわかりませんが、例を次に示します。

button { width: 6em }
button:hover span {display:none}
button:before { width: 100px; content: ""; }
button:hover:before {content: "Reply!"}

:beforeホバーしていないときでも疑似要素にサイズを与えることで、コンテンツが変更されてもレイアウトが変更されないようにする必要があります。必要な特定のレイアウトに対してこれを調整する必要がある場合がありますが、一般的な原則は、サイズ関連のすべてのプロパティが指定されていない :hoverことを確認し、レイアウト以外のプロパティ (つまり、どのボックスにも影響しないプロパティ) のみを調整することです。サイズ）の:hover状態です。

于 2013-03-18T01:08:16.193 に答える
0

あなたが提供したように、リンクは背景画像をホバリングしていますが、テストリンクでは、リンクとまったく同じように toおよびto を<a>使用する場合は、要素の前に背景画像を指定しました。background-image: url('image1');abackground-image: url('image2');a:hover

背景画像の配置を引き続き使用できます。これには、このようにする必要があります。

+--------------+
|              |    position this background to a
+--------------+
|    + Add     |    position this background to a:hover
+--------------+

Ok！このため、背景を幅 64 ピクセル、高さ 32 ピクセルにします。次に、背景を配置します a{background-image: url('image') left top no-repeat; background-position: 0% 100%;}

背景を

a:hover{background-position: 0% 0%;}
于 2013-03-18T02:52:07.230 に答える