CSSによる画像ロールオーバーのちらつきを防ぐ方法
Sep 23, 2009
AD:
最近、久しぶりデザインをすることが増えたので、CSSを触っているんですが
CSSを使って画像ロールオーバー使うことがあるのですが、それが画面を開いた段階では、a:hoverに指定した画像を読み込みに行ってくれなくて
困っておりました。そこで下記方法を思いつき対応しました。
画像を一枚にまとめます
使用した画像
htmlのソース
|
1 |
<p class="rollover"><a href="#">リンク</a></p> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
p.rollover a{ display:block; width:150px; height:50px; text-indent:-9999px; overflow:hidden; } p.rollover a{ background:url(rollover.jpg) top left no-repeat; } p.rollover a:hover{ background:url(rollover.jpg) top right no-repeat; } |
AD:
Ayumi Mizoshiri
No Comments, Comment or Ping
Reply to “CSSによる画像ロールオーバーのちらつきを防ぐ方法”
Warning: Undefined variable $user_ID in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/themes/grid_focus_public_mizo/comments.php on line 66
You must be logged in to post a comment.