1

私は3つの異なる状態ACTIVE、PRESSED、INACTIVEを達成しようとしています

画像ファイル（実際には同じ高さです： 左

右

私が探しているのは、臨床医、非臨床医、および両方の3つの異なるテキストを使用することです。

デフォルトでは、3つのテキストすべてに画像の上部1/3が表示され、画像の中央1/3にカーソルを合わせ、画像の下部1/3を押します。また、CSSで、テキストに基づいて画像のサイズを変更し、両側に約10pxのパディングを付けます。

私はこのようなものから始めました：

<html>
<head>
<style>
.hb {
    background-image: url('l.png');
    width: 120px;
    height: 50px;
    display: block;
    text-indent: -9999px;

}

.hb:hover { 
    background-position: 0 50px;
}

.hb:active{ 
    background-position: 0 -260px; 
}
</style>
</head>

<body>
<span class="hb"><a href="/help/start">CLINICIAN</a></span>
</body>
</html>

しかし、私はそれを正しくやっていないと確信しています。

4

1 に答える 1

1

spanは、cssでブロックするインライン要素です。spanではなく、クラスをリンクに適用する必要があります。

于 2013-03-12T19:02:48.523 に答える