2

マイページ:

ボタン

左から右への意味です。ノーマル、ホバー時、アクティブ。私はjQueryドロップダウン機能を使用していますが、マウスが上にないかアクティブなときに通常の画像を表示し、ホバーしたときにホバー画像を表示し、クリックするとアクティブ画像を表​​示したいと考えています。ドロップダウンが表示されます。

また、キャレットを上から 9px、左から 4px にする必要があり、可能であれば選択できないようにします。

マイページはこちら

編集: JSFiddleが作成されました。

<div id="Font-Type">
    <div class="dropdown">
        Arial <a href="#Font-Type" class="dropdown-toggle">▼&lt;/a>
        <ul class="dropdown-menu">
            <li class="Arial">Arial</li>
            <li>Monospace</li>
            <li>Cursive</li>
            <li>Fantasy</li>
        </ul>
    </div>
</div>

font-type ドロップダウンにこのようなドロップダウンを選択してフォントのプレビューを表示することを選択したことに注意してください。これは一時的に機能していませんが、問題を認識しており、最初にこれを整理しようとしています。上で見た。

デビッド・フレゴリの編集

#Font-Size {
    width:14px;
    height:22px;
    cursor:pointer;
    font-size:8px;
}
#Font-Size.img {
    background:url(../../../Images/TextEditor/buttons.png) no-repeat;
    background-position:0 0;
}
#Font-Size.img:hover {
    background:url(../../../Images/TextEditor/buttons.png) no-repeat;
    background-position:0 14;
}

たとえば、「左上」を指定しても、次の CSS には何も表示されません。

更新: David Fregoliのおかげで 更新された JSFiddle を参照してください。今答えが残っているのは、キャレットを上から9px、左から4pxにし、ドロップダウンが開いている間アクティブのままにする方法です。

4

1 に答える 1

3

CSS疑似セレクターのみが必要です

a.img {
   background-image: //img1
}
a.img:hover {
   background-image: //img2
}
a.img:active {
   background-image: //img3
}

background-image を設定する代わりに単一のスプライトを持っているように見えるので、編集して background-position プロパティを設定する必要があります

于 2013-03-29T13:15:36.683 に答える