JQuery Cycle插件和CSS Sprite - 無法在Opera上懸停註冊

Question

使用JQuery Cycle插件創建旋轉背景。同樣使用CSS的藍圖

圖像在絕對定位的DIV z-index中：1。另一個絕對定位的DIV放置在這個頂部，Z-index：999。

頂部DIV內是一個CSS Sprite菜單。

的精靈菜單的工作與每一個我測試過的瀏覽器，FF3.6，IE8/7/6，瀏覽器，Safari瀏覽器..但不是在Opera 10.6

菜單清楚地表明並沒有被阻止旋轉的背景圖像，但沒有懸停被拾起。此外，當我使用「檢查元素」並懸停時，它會正常工作，一旦我禁用「通過單擊查找元素」它將返回到不註冊。我認爲它可能與z-index有關，因爲它看起來像Jquery Cycle插件正在改變圖像的z-索引，但它只能上升到z-index：6 ...所以我'失去了。

Link to the site

的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失敗。

快速（和hacky）的解決方法是確保一些東西讓Opera認爲鼠標操作指向空A元素是重要的。舉例來說，這應該是對付它無害的方式：

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

這增加了一個簡單的捕捉鼠標懸停監聽器將火上徘徊任何東西，包括無形的空鏈接。除了使用一點額外的CPU之外，它絕對不會做任何事情，但Opera會注意到有人試圖觀察鼠標交互，並且這些元素將變爲交互式。

現在，你已經部署的代碼在我看來不是最好的方式來做到這一點。原因在於它不如其他方式來做同樣的事情 - 既不是輔助技術，也不是因爲小屏幕或用戶偏好而重新格式化頁面的瀏覽器。您的鏈接絕對沒有信息，除了網址 - 沒有鏈接文本，沒有任何內容。因爲它們涉及到一個單一的圖像，你不能給每個按鈕一個單獨的替代文字。

我的建議是使用圖像映射（HTML的MAP元素），而在區域上使用適當的ALT =「」和/或TITLE =「」屬性。這是一種做法，需要修改頁面預期佈局的輔助技術和瀏覽器都應該理解。