0

このハードルをグーグルで検索すると、フォームのボタンとして画像を使用するときに、cssとさまざまな静的ボタンをロールオーバーとして適用する方法に関する大量の情報が思い浮かびました。

私の質問は、（ボタン上の）各マウスイベントのボタンをどのように変更し、すべての状態に1つの画像を使用しているのかということです。

たとえば...ボタンに次のHTMLがあります

<input type="image" id="login_submit" name="login_submit" src="button_login.png" />

これとは別に、以前使用した次のCSSがあります...

#login_submit a {
   outline: none;
   text-indent: -5000px;
   display:block;
   margin-left: auto;
   margin-right: auto;
   width: 141px;
   height: 36px;
   background: url("button_login.png") 0 0 no-repeat;
}
#login_submit a:hover {
   background-position: -141px 0;
}
#login_submit a:active {
   background-position: -282px 0;
}

今は明らかに現時点では機能しません...では、どうすればよいでしょうか？私はもっ​​と「純粋な」CSSソリューションを探しているので、一日を明るくするJSはありません。

または、状態ごとに2/3の個別のボタンを使用する必要がありますか？

4

2 に答える 2

1

主な問題は、「＃login_submit」だけでなく「#login_submit」の子であるアンカーのスタイルを設定しようとしていることのようです。これを試してください。

#login_submit {
   outline: none;
   text-indent: -5000px;
   display:block;
   margin-left: auto;
   margin-right: auto;
   width: 141px;
   height: 36px;
   background: url("button_login.png") 0 0 no-repeat;
}
#login_submit:hover {
   background-position: -141px 0;
}
#login_submit:focus {
   background-position: -282px 0;
}

頑張って、レオ

于 2012-05-29T01:47:41.040 に答える