CSSだけで画像をマウスオーバーで切り替える

2014/10/28 CSS, HTML

マウスオーバーはいくつも手法がありますが、ここではCSSだけを使ってマウスオーバーで画像を切り替えるサンプルを紹介します。
基本的にすべて :hover 疑似クラスで要素を切り替えています。

参考　jQueryでマウスオーバー

2種類の画像を使ってマウスオーバー

HTML

<a href="#"><img src="images/dummy.gif" alt=""></a>

CSS

a {
  background: url(images/dummy_over.gif) 0 0 no-repeat;
  display: block;
  width: 200px;
  height: 150px;
}
a:hover img {
  visibility: hidden;
}

CSSスプライトでマウスオーバー

HTML

<a href="#"><img src="images/dummy.gif" alt=""></a>

CSS

a {
  display: block;
  width: 200px;
  height: 150px;
  overflow: hidden;
}
a:hover img {
    margin-top: -150px;
}

背景画像だけでマウスオーバー

HTML

<a href="#">ほげほげ</a>

CSS

a {
  background: url(images/dummy_sprite.gif) 0 0 no-repeat;
  display: block;
  width: 200px;
  height: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
}
a:hover {
    background-position: 0 -150px;
}