ボタンフォームに対するマウスオーバー効果追加

解決済

質問者：litton101
質問日時：2014/02/19 20:04
回答数：1件

簡単に実現できれば、程度の要望なのですが、以下の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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： outbrave
回答日時：2014/02/19 22:08

.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">

- 0
- 件

通報する

この回答へのお礼

outbraveさん、ご回答ありがとうございます。
おかげさまで実現できました。
a:hover みたいに、hoverは a にしかつけられないものと思ってました。

DOCTYPE宣言というのも、深い意味があるとは知りませんでしたが
たまたまご提示同じHTML4.01の宣言をしていたようです。。。

なかなか勉強すること多いですね。でも、大変たすかりました。

通報する

お礼日時：2014/02/20 00:05

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！