CSS3だけ、もしくはJavaScriptだけでマウスオーバー時に色を変える方法

マウスオーバーで要素の色を変更する方法です。

CSS3

記法

<セレクタ>:hover 

例

HTML

<input id='test-button' type='button' value='Test Button'

CSS

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()" />

Javascript

function changeColor(){
    document.getElementById('test-button').style.backgroundColor = 'red';
}

function revertColor(){
    document.getElementById('test-button').style.backgroundColor = null;
}

感想

• CSSの方が楽にかけるし、同じくらいのコード量だとしてもブラウザ間の誤差が少ないCSSの方で書いたほうがいいかな