highlighting image map areas using jquery

Question

I'm trying to highlight image map areas with jquery hover(), I have highlighting divs which are absolutely positioned over the areas, I'm trying to display the div on hover but the problem is when the mouse is hovering over a particular area the highlighting happens but disappears quickly even-though the mouse is still hovering the area, any idea what I'm doing wrong, ```

..... $(function() { $('.highlight').hide(); var id; $('area').hover(function() { id = $(this).attr('id'); highlight(id); },function() { unHighlight(id); }); function highlight(id) { $('#' + id + '_highlight').show('slow'); } function unHighlight(id) { $('#' + id + '_highlight').hide('slow'); } }); ```

Accepted Answer

the `.highlight` divs overlap your `areas`, when hovering over an area, the highlight is shown, but it disappears, because the `area` loses hover.

What you can do, is to show `.highlight` on area.mouseenter and hide `.highlight` on highlight.mouseleave.

Here's the idea:

```
$('area')
    .mouseenter(function() {
        var id = $(this).attr('id');
        $('#' + id + '_highlight').show('slow');
    });

$('.highlight')
    .mouseleave(function () {
        $(this).hide('slow');
    })
    .hide();
```

highlighting image map areas using jquery

Solution

Problem