>> HTML入門トップに戻る

イベントの設定について

今回はイベントの設定について説明します。
皆さんはマウスカーソルをある場所に乗せたときに、文字が光ったり
画像が変わったりしたのを見たことがありませんか？
実はあの設定もCSSで設定できます。

表示結果	ソースコード
	//htmlコード <div id="test1"> </div> <div id="test2"> </div> //CSSコード div#test1{ width:100px; height:100px; background:#77DF00; } div#test1:hover{ background: #9999FF; } div#test2{ width:170px; height:190px; background-image: url("/pic/img.jpg"); } div#test2:hover{ background-image: url("/pic/img2.jpg"); }

上記の二つのブロックにカーソルを乗せてみてください。
上の方のブロックは背景色がかわり、下のブロックは画像が変わっています。
これにはマウスカーソルが上に乗ったときの動作を設定できるＣＳＳの設定により
動いています。
ソースコードを見てください。
ID名の後ろに、hoverというものがあります。
これが、マウスカーソルが上に来たというイベントが発生した際に、
どういう動作をさせるかを設定するための指定です。
対象の要素の後ろの:hoverと書いて、あとは同じようにCSSを設定するだけです。
それぞれ、背景色と背景画像を変えてますよね？
これがこの動作のからくりです。
簡単ですよね？
同じようなイベントとしてfocusというのもあり、ほぼ同じ動作をします。
他にもAタグ専用で、未訪問時のリンクの色や訪問後のリンクの文字色の設定を、
link,visitedでそれぞれ設定できます。
色々と調べてみて試してみてください。
>> 【ページ内のジャンプ】に進む
>> HTML入門トップに戻る