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


●CSSでロールオーバー（１）
●Javascriptを使わず、CSSと画像だけで動作するロールオーバーのテストページ　その（１）
コニファのサイト内では、この他にもいろいろなCSSロールオーバーを使用しています。
→CSSロールオーバー（２）アニメーションgifを利用したロールオーバー
→CSSロールオーバー（３）透過PNGを利用したロールオーバー

cssでrollover1

"display:block"にして
backgroundの色と文字色を 変えています。画像は不使用。

cssでrollover2

"display:block"にして
backgroundの画像を縦に20px ずらし、文字色を変えています。
●使用画像1点
解説画像
弊社トップページ上段と中段、サイトマップページのロールオーバーはこれを使用しています。

cssでrollover3

"display:block"にして "a:hover"でbackgroundの画像を 縦に20pxずらし、"a:active"で更に 20pxずらしています。
●使用画像1点
解説画像2

cssでrollover4
tableのセルのbackgroundを濃い紫に しておき、アンカーの背景に 画像を敷き、 "a:hover"でその画像を 透過にしています。

●使用画像1点
解説画像3

cssでrollover5
アンカーの背景に画像を敷き、"a:hover"でその画像を別な画像に取り替えています。取り替え画像をプリロードしていないので、オンマウスの画像切り替えが一瞬遅れます。
●使用画像2点
解説画像4
解説画像5

cssでrollover6
5と同様のCSS、取り替え画像をアニメgifにしています。同じくプリロードしていないので、オンマウスの画像切り替えが一瞬遅れますが、アニメの動きで遅れを緩和します。
●使用画像2点
解説画像6+アニメgif
cssでrollover7

ナビゲーションtableに背景画像を敷き、アンカーの背景には透過gif,"a:hover"でその画像を網点のgifに取り替えています。5、6と同様、画像切り替えが一瞬遅れます。
●使用画像3点
解説画像7+透過gif2点
cssでrollover8


rollover2を元に少し実用的に近づけました。backgroundの画像を縦に34pxずらし、文字色を変えています。
●使用画像1点
解説画像8
cssでrollover9


rollover8と同様。
アニメgifを使用。backgroundの画像を 縦に28pxずらしています。
●使用画像1点
解説画像9

W3C CSS Validation Service
こちらでcssの文法チェックができます。

 

戻るボタン
Copyright© 2019 Conifer,Inc. All rights reserved.