CSS3だけ、もしくはJavaScriptだけでマウスオーバー時に色を変える方法
マウスオーバーで要素の色を変更する方法です。
CSS3
記法
<セレクタ>:hover
例
HTML
<input id='test-button' type='button' value='Test Button'
input#test-button:hover { background-color: red; }
Sassの場合
- Sassの場合は以下のように書くことも出来ます。
<セレクタ> { background-color: red; &:hover { background-color: blue; } }
Javascript
JSの場合は、onMouseOverとonMouseOutイベント時に呼び出すメソッドを指定して、それぞれのメソッド内でDOMを操作して色を変更すればよい。
例
HTML
<input id='test-button' type='button' value='Test Button' onMouseOver="changeColor()" onMouseOut="revertColor()" />
function changeColor(){ document.getElementById('test-button').style.backgroundColor = 'red'; } function revertColor(){ document.getElementById('test-button').style.backgroundColor = null; }