使用jQuery突出显示图像地图区域 [英] highlighting image map areas using jquery

问题描述

我正在尝试使用jquery hover()突出显示图像地图区域，

I'm trying to highlight image map areas with jquery hover(),

我具有绝对位于区域上方的div突出显示，我试图在悬停时显示div，但问题是，当鼠标悬停在特定区域上时，突出显示会发生，但即使鼠标处于悬停状态也很快消失仍悬停在该区域，

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,

知道我在做什么错

        <div class="highlight" id="first_area_highlight"></div>
        <div class="highlight" id="second_area_highlight"></div>
        <map name="worksMap" id="worksMap" class="map-areas">
          <area id="first_area" shape="poly" coords="80,64,176,46,186,95"  />
          <area id="second_area" shape="rect" coords="196,107,272,222"  />
                 .....
        </map>

$(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');
   }

});

推荐答案

.highlight div与您的areas重叠，当将鼠标悬停在某个区域上时，会显示突出显示的内容，但是它消失了，因为area失去了悬停功能

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

您可以做的是在area.mouseenter上显示.highlight，并在Highlight.mouseleave上隐藏.highlight.

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

这里是个主意:

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

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

这篇关于使用jQuery突出显示图像地图区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！