お問い合わせ営業日カレンダーサイトマップコニファHOME
コニファ：ツール紹介やプログラム集・CSSでロールオーバー（２）
HOME　> ツール集トップ　> CSSでロールオーバー（２）


●CSSでロールオーバー（２）
●Javascriptを使わず、CSSと画像だけで動作するロールオーバーのテストページ　その（２）
このページでは、アニメーションgif画像を使ったcssロールオーバーのサンプルを表示しています。オンマウス時にフォーカスがより明確？になるかもしれません。
コニファのサイト内では、この他にもいろいろなCSSロールオーバーを使用しています。
→CSSロールオーバー（１）従来からのロールオーバー
→CSSロールオーバー（３）透過PNGを利用したロールオーバー


●リストマーク非表示にして、アニメーションgif画像を背景に表示しています。


●アニメーションgif画像は横300px、左右に150pxずつマウスアウト時の画像とオンマウス時の画像を配置しています。


●ul、liの表示サイズを150pxにして、背景アニメーションgif画像左側を表示し、オンマウスで背景画像を左へ150px移動して画像の差し替えにしています。
a:hover { background-position: -150px 0;}


●使用しているアニメーションgif画像の一例





Copyright © 2010 Conifer,Inc. All rights reserved.