2009年5月21日木曜日

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

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. pentan2009年8月23日 7:30

    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を使う手法もある
    これは背景画像じゃないのでデフォルト設定でも印刷ができる

    返信削除

登録: コメントの投稿 (Atom)