IE6/7/8 中的 jQuery 菜单问题。链接消失

Question

我正在制作的网站的菜单有一个奇怪的问题。它的问题 - 当然 - Internet Explorer（所有版本）。当我将光标移到菜单元素上时，它会显示一次然后消失。您可以在 IE 下查看：link to the site 在此之后，每个菜单元素都不可点击：-[

PS。我只是想补充一下，我尝试了 *.jpg 和 *.gif 而不是 *.png 背景，但没有结果。

好的。我有 menu.js

$('#nav a').hover(function(){
    $(this).stop().animate({opacity: 1}, 'slow');},
    function(){
    $(this).stop().animate({opacity: 0}, 'slow');
});

在 css 中有：

body#start ul#nav {background: transparent url('../img/buttons_bckgd.png') no-repeat 0 0;}

#top_menu #nav li {float: left;}

#top_menu #nav li a {
   display: block;  
   height: 60px;
   margin-top: 7px;
   opacity: 0;
   }

.home {
   width: 163px;
   margin-left: 12px;
   }

.home:hover {background: url('../img/buttons_bckgd.png') no-repeat -12px -382px;}

html部分是纯标准：

<ul id="nav">
   <li><a class="home" href="#"></a></li>
   <li><a class="offer" href="#"></a></li>
   <li><a class="gallery" href="#"></a></li>
   <li><a class="contact" href="#"></a></li>
</ul>

任何想法为什么会消失以及如何解决这个问题？

Answer 1

这很奇怪。我根据您的代码为您设置了一个示例。 http://jsfiddle.net/Ruhley/emHFY/。它适用于我在 IE7 上，你呢？

Answer 2

好的，第二次尝试 :-) 我做了一些测试 http://jsfiddle.net/7h6Vn/ 应该适用于所有浏览器。然而，我需要添加以使其在 IE6 中工作的关键 CSS 属性是 #nav li a 规则中的 background-color: white; 行。如果你把它拿出来，那么悬停动画在第一次之后就会被破坏。

我只有 IE6，所以这可能无法解决所有 IE 版本的问题。

编辑：这似乎解决了悬停问题，但您可能需要将背景颜色设置为不同的菜单。

还要感谢那个让我记忆犹新的网站 background-color 修复 - http://www.useragentman.com/blog/2010/09/02/how-to-make-cleartype-font-face-fonts-and-css-visual-filters-play-nicely-together/

编辑 2：好的，这 http://jsfiddle.net/7h6Vn/1/ 绝对有效（将鼠标悬停在结果区域上）。我正在链接到您的图像以显示悬停淡入淡出动画。在玩弄这项工作的同时，我也遇到了与solved here 相同的问题。最后要注意的一点是，我需要为非标准的 IE 添加 CSS 不透明度过滤器，因此您可能希望将其放在单独的 IE 特定 CSS 文件中。

我不确定这正是你想要的，但玩这个还是很有趣的。

Answer 3

你能不能把代码放在同一个页面而不是不同的脚本文件中。

打开IE8开发者工具调试menu.js脚本显示，鼠标第二次悬停时，代码没有执行。

Answer 4

仅在文档准备好时尝试添加事件连接，类似于：

$(document).ready(function() {
  // Do menu event wiring here...
});

...并在关闭正文标记之前添加脚本链接包含。它通常对我有用。

Answer 5

DD_belatedPNG 脚本是否会干扰背景图像属性？我知道您说过您尝试过使用不同的图像类型，但您是否尝试过删除 PNG 修复脚本？这在 http://jsfiddle.net/Ruhley/emHFY/ 中不存在，这可能解释了为什么它在该演示中有效，而不是在您的网站上。