kawama.jp

JavaScriptを使わずにCSSだけでマウスオーバーを実現する

カテゴリ: 技術関連 — 2009年5月20日 16:49 — Comments (1)hatebu count

cssのa:hoverを使うことで簡単に実現できます。
参考
http://www.iam-strangeman.com/blogs/2006/07/css_mouseover_1.html
http://www.stylish-style.com/csstec/basic/l-rollover6.html
良いところは、ソースが短くなり可読性があがることと、読み込む画像数も減ること。
悪いところは、特に思いつきません。
今後マウスオーバーが必要なときはCSS方式を使おうと思います。

1件のコメント »

  1. IMGタグではなくCSSのbackground-imageを使っているところでデメリットが発生するんじゃないかな??
    あくまで
    background-image=背景画像
    なので
    モバイル環境とかで回線速度が遅くて画像が読み込めなかったときには何も表示されないとか
    CSSのバグにはまりやすいとか
    1つ目のサイト
    IE5だとロールオーバーしないだけじゃなくリンクすらできない
    2つ目のサイトの1つ目
    IE5だとなにも表示されない
    2つ目のサイトの2つ目
    IRの初歩的な手法
    無駄なSPANタグが増えてる
    そもそもIMGタグを使ったほうがいいんじゃない?って議論もされてるところ
    http://kikky.net/pc/mouse_over.html
    それ以外にもlist-imageを使う手法もある
    これは背景画像じゃないのでデフォルト設定でも印刷ができる

    コメント by pentan — 2009年8月22日 @ 22:30

RSS feed for comments on this post. TrackBack URL

Leave a comment

Copyright (C) 2002 - 2017 kawama All Rights Reserved. — Powered by WordPress