CSSによる画像ロールオーバーのちらつきを防ぐ方法

Ayumi

15 years ago

最近、久しぶりデザインをすることが増えたので、CSSを触っているんですが
CSSを使って画像ロールオーバー使うことがあるのですが、それが画面を開いた段階では、a:hoverに指定した画像を読み込みに行ってくれなくて
困っておりました。そこで下記方法を思いつき対応しました。

サンプル

画像を一枚にまとめます

使用した画像

htmlのソース

&lt;p class="rollover"&gt;&lt;a href="#"&gt;&#12522;&#12531;&#12463;&lt;/a&gt;&lt;/p&gt;

1	<p class="rollover"><a href="#">リンク</a></p>

CSS

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;
}

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;

}

Tags: Css, Design

画像を一枚にまとめます

Related posts