CSS hover problem on chrome and safari

Question

I have this strange issue with css hover, on chrome and safari (on opera and firefox it works just fine).

Here you can find a demo of the problem http://cgi.di.uoa.gr/~grad1054/bug/

In chrome when the mouse is over the html area tag, it somehow misses that is continues to hover over the general div, and so the css rule for the hover is not applied.

Do you have any ideas or solutions?

Thx

Answer 1

The map and area tags, although not officially deprecated, are not widely used anymore. It is possible that this is a bug in the Webkit rendering engine. As far as I can see, Firefox's behavior should be correct. The solution should be rather simple - to use some other element for this.

---

Solution: http://jsfiddle.net/NZEXY/1/

In my solution, I used the ul list and anchors inside list items to recreate this effect, using essentially sprite techniques to recreate the same thing with the same image, and still accessible (if you're using maps your areas are suppose to have alt attributes for that purpose).

If you have any questions, feel free to drop a comment.