0

私のウェブサイト：http：//reckless-gaming.com/aT/ はゲームのウェブサイトです。

ただし、上部のナビゲーションメニューにカーソルを合わせると、初めてカーソルを合わせると白いボックスが表示され、その後消えます。私のナビゲーションCSSコーディングはすべて正しいですが、少なくとも私は願っています。

4

2 に答える 2

2

ホバー時に白いボックスが表示される理由

これが発生する理由は、ホバー画像がまだ読み込まれていないためです。そのため、ホバーするとブラウザーが読み込まれるため、CSS は問題ありません。:)

解決策 1: jQuery プラグインを使用する

このプリロード jQuery プラグインを使用して、画像をプリロードすることを検討してください。CSS ファイルの前に定義します。CSS 内のすべての画像が自動的にプリロードされるため、必要なのは を呼び出すことだけです$.preloadCssImages();。以下に例を示します。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/preloadCssImages.jQuery_v5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $.preloadCssImages();
}); 
</script>
<link href="_stylesheet.css" rel="stylesheet" type="text/css" />

そのプラグインはここからダウンロードできます。

解決策 2: 非表示の div にホバー画像を読み込む

もう 1 つの方法は、すべての画像を hidden に配置して、HTML の方法でプリロードすること<div>です。

<div style="display:none;">
<img src="hoverImage1.jpg" />
<img src="hoverImage2.jpg" />
<img src="hoverImage3.jpg" />
 etc..
</div>

その後、それらはすでにロードされており、その白い「ボックス」は表示されません。どちらの方法でも機能します。あなたに最適なものは何でも！

これが役立つことを願っています！

于 2011-11-23T22:38:31.807 に答える
0

ナビゲーション画像をプリロードしてみてください。または、別の画像ではなく、CSS を使用して下線を適用することをお勧めします。

于 2011-11-23T22:37:41.503 に答える