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


●CSSでロールオーバー(1)

●Javascriptを使わず、CSSと画像だけで動作するロールオーバーのテストページ その(1)
コニファのサイト内では、この他にもいろいろなCSSロールオーバーを使用しています。
CSSロールオーバー(2)アニメーションgifを利用したロールオーバー
CSSロールオーバー(3)透過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.