IEでアンカー以外にもhover効果 動作サンプル

動作サンプル

通常のボタン

hoverでスタイルを指定したボタン
ボタンにマススカーソルをポイントすると、背景色、文字色、マウスカーソルの形状が変わります。

この動作サンプルのソース(主な関連部分)

外部Jsファイルを読み込みます。
<script type="text/javascript" src="allhover.js"></script>


マウスオーバー時のスタイルを指定します。
セレクタの前者は通常ブラウザ向け、後者がこのJavascript向け(IE向け)です。
<style type="text/css">
input.submit:hover , input.submitHover{
	background-color:red;
	color:white;
	cursor:pointer;
}
input.reset:hover , input.resetHover{
	background-color:blue;
	color:white;
	cursor:pointer;
}
</style>


初期化を行います。
<body onload="allhover(['input.submit','input.reset'])">
[ ]内に対象を指定します。


hover処理の対象となる要素です。
<p class="smpl1">
	<input type="submit" value="送信ボタン" class="submit">
	<input type="reset" value="リセット" class="reset">
</p>

 

ページ先頭 目次に戻る 解説に戻る CGI-PLANT