css - 导航菜单上的白色悬停框

Question

我的网站:http://reckless-gaming.com/aT/ 是一个游戏网站。

但是当您将鼠标悬停在顶部的导航菜单上时，第一次悬停时，会出现一个白色框，然后消失。我希望我所有的导航 CSS 编码都是正确的。

Answer 1

悬停出现白框的原因

发生这种情况的原因是悬停图像尚未加载，因此浏览器会在您将鼠标悬停在它们上方时加载它们，因此您的 CSS 没问题。 :)

解决方案 1:使用 jQuery 插件

考虑使用这个 preloading jQuery plugin预加载图像。在您的 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" />

您可以下载该插件 here .

解决方案 2:在隐藏的 div 中加载悬停图像

另一种方法是通过将所有图像放入隐藏的 <div> 中以 HTML 方式预加载它们。 :

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

然后它们就已经被加载了，那个白色的“框”就不会显示了。无论哪种方式都有效；什么是最适合你的!

希望对您有所帮助!