我的网站:http ://reckless-gaming.com/aT/ 是一个游戏网站。
但是当您将鼠标悬停在顶部的导航菜单上时,第一次悬停时,会出现一个白色框,然后消失。我所有的导航 CSS 编码都是正确的,至少我希望如此。
发生这种情况的原因是悬停图像尚未加载,因此当您将鼠标悬停在它们上方时浏览器会加载它们,因此您的 CSS 很好。:)
考虑使用这个预加载 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" />
您可以在此处下载该插件。
另一种方法是通过将所有图像放入 hidden 以 HTML 方式预加载它们<div>
:
<div style="display:none;">
<img src="hoverImage1.jpg" />
<img src="hoverImage2.jpg" />
<img src="hoverImage3.jpg" />
etc..
</div>
然后它们已经被加载并且那个白色的“盒子”不会显示。无论哪种方式都有效;什么是最适合你的!
我希望这有帮助!
尝试预加载您的导航图像。或者更好 - 使用 CSS 来应用下划线,而不是单独的图像。