Jquery区域鼠标悬停问题

Question

我在一个 worpress 网站上，我尝试用不断变化的图像制作曼荼罗。

我使用 jquery 和 css 中的区域，当鼠标悬停在由区域分隔的部分上时，我会显示相应的图像。 但是有一个问题，当我把鼠标放在上面时，需要一些时间（1s）才能显示图像，当我把鼠标放在另一个部分时，它就不能正常工作了。..

我认为问题是由于新显示的图像出现在由区域分隔的鼠标悬停部分

这里是html代码：

<div class="mandala">
    <img id="mandala_img" src="http://example.org/site/wp-content/uploads/2015/02/background.png" usemap="#mandala_map">
    <div id="image1"></div>
    <div id="image2"></div>
    <div id="image3"></div>
    <div id="image4"></div>
    <div id="image5"></div>
    <div id="image6"></div>
    <div id="image7"></div>
    <div id="image8"></div>
    <map name="mandala_map" id="mandala_map">
    <area shape="poly" coords="310,10,422,33,498,87,430,154,383,121,310,106" href="http://example.org/site/" id="area_image1">
    <area shape="poly" coords="498,87,430,154,479,274,576,274,557,178" href="http://example.org/site/" id="area_image2">
    <area shape="poly" coords="479,275,576,275,553,383,499,462,430,393,463,348" href="http://example.org/site/" id="area_image3">
    <area shape="poly" coords="499,462,430,393,310,442,310,540,420,516" href="http://example.org/site/" id="area_image4">
    <area shape="poly" coords="310,442,310,540,206,518,124,462,192,393" href="http://example.org/site/" id="area_image5">
<!--    <area shape="poly" coords="124,462,192,393," href="http://example.org/site/" id="area_image2">
    <area shape="poly" coords="" href="http://example.org/site/" id="area_image2">
    <area shape="poly" coords="" href="http://example.org/site/" id="area_image2">-->
    </map>
</div>

js代码：

<script type="text/javascript">
    $('.mandala area').each(function () {
    // Assigning an action to the mouseover event
    $(this).mouseover(function (e) {
        var image = $(this).attr('id').replace('area_', '');
        $('#image1').css('display', 'none');
        $('#image2').css('display', 'none');
        $('#image3').css('display', 'none');
        $('#image4').css('display', 'none');
        $('#image5').css('display', 'none');
        $('#image6').css('display', 'none');
        $('#image7').css('display', 'none');
        $('#image8').css('display', 'none');
        $('#' + image).css('display', 'block');
    });
});
</script>

曼荼罗是这样的：

鼠标上显示的图像如下：

感谢您的帮助

Answer 1

根据我的建议，我做了一个基本的粗略小提琴。它还不是很顺利，但这只是为了证明我的建议。

我所做的只是通过使用透明屏幕进行图像映射来根据悬停的区域更改背景图像

Fiddle link here

片段如下..

    $("#area_image1").mouseover(function(e) {
      $('.mandala').css("background", "url('http://i.stack.imgur.com/xypLJ.png') no-repeat center");
    });
    $("#area_image1").mouseout(function(e) {
      $('.mandala').css("background", "url('http://i.stack.imgur.com/A690W.png')");
    });

.mandala {
  background-image: url("http://i.stack.imgur.com/A690W.png");
  display: inline-block;
}
#mandala_img {
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="mandala">
  <img id="mandala_img" src="http://dummyimage.com/600x541.png&text=sample" width="600" height="541" usemap="#mandala_map">
  <map name="mandala_map" id="mandala_map">
    <area shape="poly" coords="310,10,422,33,498,87,430,154,383,121,310,106" href="#area_image1" id="area_image1" />
    <area shape="poly" coords="498,87,430,154,479,274,576,274,557,178" href="#area_image2" id="area_image2" />
    <area shape="poly" coords="479,275,576,275,553,383,499,462,430,393,463,348" href="#area_image3" id="area_image3">
    <area shape="poly" coords="499,462,430,393,310,442,310,540,420,516" href="#area_image4" id="area_image4" />
    <area shape="poly" coords="310,442,310,540,206,518,124,462,192,393" href="#area_image5" id="area_image5" />
  </map>
</div>

这只是概念验证。请不要告诉我这不能完全按照您想要的方式工作

希望这会有所帮助。