![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
簡単に実現できれば、程度の要望なのですが、以下のHTMLでボタン上にマウスカーソルが乗ったら
(1) この人に投票する! が赤字になる
(2) kao.pngが、nikoniko.png に変わる
(3) マウスを離すと(1) (2) が既定に戻る
と動作させることはできますか?
なお、(1) については、inputタグに
onmouseover="this.color='red'" onmouseout="this.color='blue'"
を仕込んでみましたがダメでした。
<html>
<head>
<style type="text/css">
.btn {
background-repeat: no-repeat;
color: blue;
background-position: left;
padding-left: 25px;
background-image: url(./kao.png); /* 22px x 22px */
}
-->
</style>
</head>
<body>
<input type='button' name='vote' value='この人に投票する!' class='btn'/>
</body>
</html>
No.1ベストアンサー
- 回答日時:
.btn:hover {
color: red;
background-image: url(nikoniko.png); /* 22px x 22px */
}
ただし、互換モードでは正しく表示されないので、DOCTYPE宣言が必要です。
<html> から書き始めているとダメという意味です。
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
HTML5
<!DOCTYPE html>
<html lang="ja">
outbraveさん、ご回答ありがとうございます。
おかげさまで実現できました。
a:hover みたいに、hoverは a にしかつけられないものと思ってました。
DOCTYPE宣言というのも、深い意味があるとは知りませんでしたが
たまたまご提示同じHTML4.01の宣言をしていたようです。。。
なかなか勉強すること多いですね。でも、大変たすかりました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
ul liのclass指定について
-
form input テキストを上下中央...
-
画像と一緒にスライドするリン...
-
余分な縦スクロールバーが出て...
-
【CSS】ヘッダーの高さが不明の...
-
HTMLで一部だけスクロールする...
-
スクロールボックスを中央に配...
-
safariでの横並びリスト(List...
-
IE6で外部リンク画像の下に隙間
-
IE6からHTML罫線ができるだけ細...
-
CSS position: relativeについて
-
DIV要素のボックスを移動させる...
-
font-sizeが効かない
-
FORMのサイズがIEとFirefoxで違...
-
CSSのレイアウト指定だけが無効...
-
W3Cのソースコードの検証サービ...
-
ボタンフォームに対するマウス...
-
CSSで背景画像を一番下にもって...
-
footer を横幅いっぱいに広げる...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
W3Cのソースコードの検証サービ...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
CSSがなぜかfont-sizeだけ効か...
-
table周辺の隙間をなくしたい。
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報