导航菜单上的白色悬停框

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>

然后他们已经加载了，那个白色的“盒子”就不会出现了。无论哪种方式都有效;什么是最适合你的！

我希望这有帮助！

Answer 2

尝试预加载导航图像。或者更好 - 使用CSS来应用下划线，而不是单独的图像。