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

Question

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

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

Answer 1

悬停时出现白框的原因

发生这种情况的原因是悬停图像尚未加载，因此当您将鼠标悬停在它们上方时浏览器会加载它们，因此您的 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 中加载悬停图像

另一种方法是通过将所有图像放入 hidden 以 HTML 方式预加载它们<div>：

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

然后它们已经被加载并且那个白色的“盒子”不会显示。无论哪种方式都有效；什么是最适合你的！

我希望这有帮助！

Answer 2

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