jQuery IE6 悬停脚本不起作用答案

【问题标题】：jQuery IE6 hover script not workingjQuery IE6 悬停脚本不起作用
【发布时间】：2011-09-21 13:50:14
【问题描述】：

我已经花了好几个小时，但我一生都无法弄清楚为什么 jQuery IE6 悬停修复 (http://plugins.jquery.com/project/ie6hover) 不起作用。此外，也许不相关，但我似乎无法获得http://www.dillerdesign.com/experiment/DD_belatedPNG/ 或任何适用于我的 Shopify 网站的 IE6 黑客。任何建议都会被珍惜。以下是我输出的代码的相关部分（在 Shopify 完成操作之后）：

<head>

<link href="http://cdn.shopify.com/s/files/1/0070/7142/t/1/assets/stylesheet.css?122494" rel="stylesheet" type="text/css"  media="all"  />
<script src="http://cdn.shopify.com/s/files/1/0070/7142/t/1/assets/jquery-1.5.2.min.js?122494" type="text/javascript"></script>

<!--[if IE 6]>
<script src="http://cdn.shopify.com/s/files/1/0070/7142/t/1/assets/DD_belatedPNG.js?122494" type="text/javascript"></script>
<script>
    DD_belatedPNG.fix('.pngy');
</script>

<script src="http://cdn.shopify.com/s/files/1/0070/7142/t/1/assets/jquery.ie6hover.js?122494" type="text/javascript"></script>
<script type="text/javascript">
    $.ie6hover(true);
</script>
<![endif]-->

</head

<body>

<a href="/"><img class="pngy" src="http://cdn.shopify.com/s/files/1/0070/7142/t/1/assets/alternative-radio-logo.png?122494" width="379" height="80" /></a>

<ul>
  <li >
    <a href="/collections/all-programs" class="strong-link">Programs</a>
    <ul class="sub-navigation">
      <li><a href="/collections/latest-programs">Latest Programs</a></li>
      <li><a href="/collections/staff-favorites">Staff Favorites</a></li>
      <li><a href="/collections/subscriptions">Season Subscriptions</a></li>
      <li><a href="/collections/all-programs">All Programs</a></li>
    </ul>
  </li>
  <li >
    <a href="/pages/speakers" class="strong-link">Speakers</a>
  </li>
  <li >
    <a href="/pages/podcast" class="strong-link">Podcast</a>
  </li>
  <li >
    <a href="/pages/affiliates" class="strong-link">Stations</a>
    <ul class="sub-navigation">
      <li><a href="/pages/affiliates">Affiliate Stations</a></li>
      <li><a href="/blogs/news-for-affiliates">News for Affiliates</a></li>
    </ul>
  </li>
  <li  >
    <a href="/pages/about-ar">About</a>
  </li>
  <li  >
    <a href="/blogs/news-updates">News Updates</a>
  </li>
  <li  >
    <a href="/pages/about-barsamian">Barsamian</a>
  </li>
  <li class="last" >
    <a href="/pages/contact">Contact</a>
  </li>
<div class="clear"></div>
</ul>

</body>

这里是来自 stylesheet.css 的相关 CSS（我已经去掉了颜色、字体样式、填充和阴影）：

div#navigation ul {
    float: left;
    z-index: 10;
}

div#navigation ul li {
    display: block;
    float:left;
}

li:hover ul, li.over ul { 
    display: block;
}

div#navigation ul li a {
    display:block;
}

div#navigation ul li ul.sub-navigation {
    display:none;
    width:180px;
}

div#navigation ul li:hover ul.sub-navigation {
    display:block;
    position:absolute;
}

div#navigation ul li:hover ul.sub-navigation li {
    width:100%;
}

【问题讨论】：

有一个未闭合的头部标签..
伙计，谁让你支持 IE6？甚至谷歌也放弃了支持。不过，我一直很喜欢 Dean Edwards IE*.js 系列脚本。现在有 IE9.js，它将 IE6-8 中缺少的所有内容添加到这些浏览器中。它可能无法解决您的问题，但一个脚本而不是多个脚本意味着要调试的移动部件更少。
@amosrivera 我在最后一秒输入了这些内容以供查看——在我的代码中是正确的。不过还是谢谢。
@chrisdpratt 感谢您向我介绍 IE9.js！它修复了 png 问题，以及什么方便。不幸的是，悬停问题仍然存在：\
您现在是同时使用 IE9.js，还是仍在尝试使用该插件进行悬停？使用 IE9.js，您无需做任何其他特别的事情。你可以随意使用 li:hover 伪类。

标签： jquery png hover drop-down-menu internet-explorer-6

【解决方案1】：

对于悬停问题，

我不确定 jQuery 插件是否解决了这个问题，但在 IE6 中，您不能将 :hover 放在除 'a' 之外的任何东西上，而将它放在 'li' 上。如果这是插件修复的问题，那么我的评论毫无用处。

【讨论】：

我很确定这正是插件的用途；）。