読者です 読者をやめる 読者になる 読者になる

脳汁portal

アメリカ在住(だった)新米エンジニアがその日学んだIT知識を書き綴るブログ

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の方で書いたほうがいいかな