JQuery Cycle 插件和 CSS Sprite - 没有向 Opera 注册悬停

Question

使用 JQuery Cycle 插件创建旋转背景。还使用 CSS 蓝图

图像位于绝对定位的 DIV z-index:1 内。另一个绝对定位的 DIV 放置在该 DIV 的正上方，z-index:999。

顶部 DIV 中有一个 CSS Sprite 菜单。

精灵菜单适用于我测试过的每个浏览器，FF3.6，IE8/7/6，Chrome，Safari ..但不适用于 Opera 10.6

菜单显示清晰，不会被旋转背景图像遮挡，但没有悬停正在被拾取。另外，当我使用“检查元素”并悬停时，它可以正常工作，一旦我禁用“通过单击查找元素”，它就会回到不注册状态。

我认为这可能与 z-index 有关，因为看起来 Jquery Cycle 插件正在更改图像的 z-index，但它只上升到 z-index:6...所以我迷路了。

网站链接

CSS 要点

#background-images {
   width:950px;
   height:515px;
   position:absolute;
   top:0; left:0;
   z-index:1;
   }

#absolute-overlay {
   position:absolute;
   top:0; left:0;
   z-index:998;
   }

#relative-overlay {
   position:relative;
   width:950px;
   height:515px;
   }

#navbar {
   width:410px;
   height:279px;
   background:url(../images/savvier/menu-sprite.png);
   padding:0;
   position:relative;
   float:right;
   clear:both;
   }

HTML 的要点

<div id="background-images">
<div class="slideshow">
<img src="images/savvier/rotate/rotate_1.jpg" width="950" height="515" />
<img src="images/savvier/rotate/rotate_2.jpg" width="950" height="515" style="display:none;" />
<img src="images/savvier/rotate/rotate_3.jpg" width="950" height="515" style="display:none;" />
<img src="images/savvier/rotate/rotate_4.jpg" width="950" height="515" style="display:none;" />
<img src="images/savvier/rotate/rotate_5.jpg" width="950" height="515" style="display:none;" />
<img src="images/savvier/rotate/rotate_6.jpg" width="950" height="515" style="display:none;" />
</div>
</div>

<div class="span-24" id="absolute-overlay"><div id="relative-overlay">
<div class="logo"><img src="images/savvier/logo.png" alt="Flirty Girl Fitness&trade;" /></div>
<ul id="navbar">
<li id="menu-chicago"><a href="http://chicago.flirtygirlfitness.com/chicago_html/"></a></li>
    <li id="menu-toronto"><a href="http://toronto.flirtygirlfitness.com/toronto_html/"></a></li>
    <li id="menu-activewear"><a href="http://www.flirtygirlactivewear.com/"></a></li>
    <li id="menu-instructor"><a href="http://www.flirtification.com/"></a></li>
    <li id="menu-findclass"><a href="http://www.flirtification.com/find-class.asp"></a></li>
    <li id="menu-tv"><a href="http://flirtygirlfit.com/"></a></li>
</ul>
</div></div>

Answer 1

嗯，这是一种我以前从未见过的方法 - 您创建完全空的 A 标签，并将它们小心地放置在其他不相关的图像之上，以产生您拥有可点击“按钮”的错觉。

首先，我将解释为什么 Opera 不处理它，为您提供一个快速解决方法 - 然后说几句话，说明为什么您可能想要考虑以不同的方式做事。

Opera 不会检测任何鼠标操作，因为它试图忽略在某些情况下，空元素上方的鼠标操作（如果用户实际上尝试单击这些空元素“后面”的某些内容）。在这里，我们试图复制 IE 所做的事情 - 显然不够精确，因为即使我删除了您的条件注释和特定于 IE 的样式表，IE 也可以工作，而 Opera 会失败。

快速（且简单）的解决方法是确保某些东西使 Opera 认为针对空 A 元素的鼠标操作是重要的。例如，这应该是一种无害的处理方式：

<script>if(document.addEventListener)document.addEventListener('mouseover', function(){}, true)</script>

这添加了一个简单的捕获鼠标悬停侦听器，该侦听器将在悬停任何内容（包括不可见的空链接）时触发。除了使用一点点额外的 CPU 之外，它绝对不会做任何事情，但 Opera 会注意到有东西正在尝试观察鼠标交互，并且元素将变得具有交互性。

现在，我认为您部署的代码不是最好的方法。原因是它不像其他方法那样容易完成同样的事情——无论是辅助技术还是由于小屏幕或用户偏好而重新格式化页面的浏览器。除了 URL 之外，您的链接绝对没有任何信息 - 没有链接文本，什么也没有。因为它们与单个图像相关，所以您也不能为每个按钮提供单独的替代文本。

我的建议是使用图像地图（HTML 的 MAP 元素），并在区域上使用适当的 ALT="" 和/或 TITLE="" 属性。这是一种需要修改页面预期布局的辅助技术和浏览器都应该理解的方法。