JQuery Cycle Plugin and CSS Sprite - no hover registered with Opera

Question

Using JQuery Cycle plugin to create a rotating background. Also using Blueprint for CSS

The images are within an absolutely positioned DIV z-index:1. Another absolutely positioned DIV is placed right on top of this one with z-index:999.

Within the top DIV is a CSS Sprite Menu.

The sprite menu works with every browser I've tested, FF3.6, IE8/7/6, Chrome, Safari.. but not in Opera 10.6

The menu shows clearly and is not being blocked by the rotating background images, but no hover is being picked up. Also, when I use "inspect element" and hover, it functions correctly, once I disable "Find Element by Clicking" it goes back to not registering.

I think it may have something to do with z-index since it looks like Jquery Cycle plugin is changing the z-indexes of the images, but it only goes up to z-index:6... so I'm lost.

Link to the site

The gist of the 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;
   }

The gist of the 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/"&gt;&lt;/a&gt;&lt;/li&gt;
    <li id="menu-toronto"><a href="http://toronto.flirtygirlfitness.com/toronto_html/"&gt;&lt;/a&gt;&lt;/li&gt;
    <li id="menu-activewear"><a href="http://www.flirtygirlactivewear.com/"&gt;&lt;/a&gt;&lt;/li&gt;
    <li id="menu-instructor"><a href="http://www.flirtification.com/"&gt;&lt;/a&gt;&lt;/li&gt;
    <li id="menu-findclass"><a href="http://www.flirtification.com/find-class.asp"&gt;&lt;/a&gt;&lt;/li&gt;
    <li id="menu-tv"><a href="http://flirtygirlfit.com/"&gt;&lt;/a&gt;&lt;/li&gt;
</ul>
</div></div>

Answer 1

Well, this is a way to do it that I've never seen before - you create completely empty A tags and position them carefully on top of an otherwise unrelated image, to make the illusion that you have clickable "buttons".

First I'll explain why Opera doesn't handle it, give you a quick workaround - and then say a few words about why you might want to consider doing things differently..

Opera doesn't detect any mouse actions because it tries to ignore mouse actions above empty elements under some circumstances (in case the user actually tries to click something "behind" those empty elements). Here we are trying to copy what IE does - apparently not exact enough, since IE works and Opera fails even when I remove your conditional comments and IE-specific stylesheet.

The quick (and hacky) workaround is to make sure something makes Opera think mouse actions directed at the empty A elements are significant. For example, this should be a harmless way to deal with it:

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

This adds one simple capturing mouseover listener that will fire on hovering anything, including the invisible empty links. Except for using a tiny bit of extra CPU it will do absolutely nothing, but Opera will notice that something is trying to observe the mouse interaction and the elements will become interactive.

Now, the code you have deployed is in my opinion not the best way to do it. The reason is that it is not as accessible as other ways to do the same thing - neither to assistive technology nor to browsers that reformat the page due to small screens or user preferences. Your links have absolutely no information except the URL - no link text, nothing. Because they relate to one single image you can not give each button a separate alternative text either.

My suggestion would be using an image map (HTML's MAP element) instead, with appropriate ALT="" and/or TITLE="" attributes on the areas. This is a way to do it that both assistive technologies and browsers that need to modify your page's intended layout should understand.