解決済
Ads By Google
CSSでロールオーバー指定した時に画像が消える現象の対処法を教えてください。
CSSでリンク画像のロールオーバー指定をしています。ページを開いてリンクボタンへの一回目のオンマウス時にhover時の画像が表示されず画像が消えてしまいます。
二回目以降は問題なく画像が表示されます。
この画像のちらつきを回避する方法はありますか？
ちなみにロールオーバー指定をCSSでこの様にしています。
#hoge a{
width:100px;
height:100px;
background:url(./img/image1.jpg) no-repeat;
text-decoration:none;
text-indent:-9999px;
display:block;
padding:0;
margin:0;
}
#hoge a:hover{
background:url(./img/image2.jpg) no-repeat;
}
html内に記述時は
<div id="hoge">
<a href="hoge.html">hogeへのリンクはこちら</a>
</div>
としています。
どなたかぜひアドバイスをよろしくお願いしますm(_ _)m
2007-03-17 12:30の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。
コメント(4)
#1. nuts
2007-03-17 21:06:04
アドバイスありがとうございますm(_ _)m
displayを外すとイメージ画像がきちんとしたサイズで表示されない等問題が出、text-indentがないと、htmlに記述する際コメントを書くと、そのコメントがそのまま画像に重なって出てしまうのです・・・
2007-03-18 23:03:15
意味があったのですね。
もう、JavaScriptにしましょう！
元祖ですし、楽ですよっ！！
#3. nuts
2007-03-19 09:40:43
JavaScriptだと楽ですよね！
でもせっかくここまでがんばったので、何とか対処法を探してみます。
アドバイスありがとうございます（＾_＾）
#4. nuts
2007-03-19 12:01:54
色々調べ、結局画像を一枚にする事で無事問題が解決しました♪
ノーマル時とオンマウス時の画像を縦に並べた形で画像を作成し、CSSで
#hoge a {
width:100px; height:100px; text-decoration:none; text-indent:-9999px; display:block; padding:0; margin:0; overflow:hidden; background:url(./img/image1.jpg) ;#hoge a:hover {
background-position:0 -100px;}
と指定してあげた所ばっちりでした！
お騒がせしましたm(_ _)m
