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

css.php