テキストボックスにマウスカーソルが重なったときに、テキストボックスの枠やスタイルを変更する
テキストボックスにマウスカーソルが重なったときに、テキストボックスの枠を変更するコードを紹介します。
概要
テキストボックスにマウスカーソルが入って重なった際にテキストボックスのスタイルを変更するには、hover疑似クラスにスタイルを記述します。
例
コード
下記のHTML、CSSファイルを記述します。
.TextBoxHover:hover {
border: 1px solid #0094ff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="TextBoxHover.css" />
</head>
<body>
テストページ<br />
<input type="text" class="TextBoxHover" />
</body>
</html>
解説
:hover疑似クラスを利用して、
.TextBoxHover:hover の記述で.TextBoxHoverクラスの要素にマウスポインタが重なった場合のスタイルを記述できます。
今回の例では、boderプロパティの色を変更するスタイルを記述しています。
表示結果
HTMLファイルをWebブラウザで表示します。下図のページが表示されます。
マウスポインタをテキストボックスに重ねると境界線が水色に変わります。
テキストボックスをクリックして、テキストボックス内にキャレットが表示された編集状態になるとフォーカスの枠が表示されます。
背景色も変更する場合
背景色も変更する場合は、backcolorプロパティを設定します。
.TextBoxHover:hover {
border: 1px solid #0094ff;
background-color:#cbe9ff;
}
上記のTextBoxHover.cssを利用して、マウスポインタが重なった場合の画面です。
outlineプロパティを指定した場合
TextBoxHover.cssファイルでoutlineプロパティを設定した場合、テキストボックスの境界線の外側に枠が表示されます。
.TextBoxHover:hover {
outline: 1px solid #0094ff;
}
上記のCSSでページを表示し、テキストボックスの上にマウスポインタを重ねた画面です。テキストボックスの境界線の外側に水色の枠が表示されることが確認できます。
マウスポインタが重なった場合のテキストボックスのスタイルを変更できました。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
