Weirdness with hover and transparent regions
Hi all, I am new to jQuery and web development in general (not new to development, but thought I would see if this whole interweb thing was a fad or not). First off, love jQuery, it is the awesome. That said I am seeing some weirdness in IE 8 (wut?!? I know!) with jQuery's hover method and wondering if it was a known issue or something I am doing wrong.
I will try to explain what I am seeing, perhaps I can upload pics/attachments if it is unclear. I have this (more or less)
-
<div>
<ul>
<li class="navButton">
<img src="Image1" Alt="Image1" />
</li>
<li class="navButton">
<img src="Image2" Alt="Image2" />
</li>
<li class="navButton">
<img src="Image3" Alt="Image3" />
</li>
<li class="navButton">
<img src="Image4" Alt="Image4" />
</li>
</ul>
</div>
Now neither this div, unordered list or any list items has a background-color set (so I assume they default to transparent), but they live on an element that does have a solid color background set. On page load I use $('.navButton').hover(OnHoverEnter,OnHoverLeave) to hook up mouse handlers to each navButton. So far so good, things get hooked up and called back. The problem I am seeing seems to be around transparent regions. Specifically the images have some solid areas and some transparent areas. I seem to be getting mouse leave events when I hit a transparent area (assuming because the hit pixel 'belongs' to the outermost owning div that has the background set). If I then move another pixel I get a mouse enter, another pixel a mouse leave. I don't see this weird behavior while over the solid areas of my images. I also don't see this behavior if I set the li items to have a background-color in the CSS. Unfortunately I can't set the background on the li or ul for other reasons. Is this expected behavior? Am I doing it wrong? Thanks for any help, sorry for the long message.
Ryan