Javascript Jquery区域鼠标悬停问题

我在一个worpress网站上，我试着制作一个带有变化图像的曼荼罗

我使用jquery和css中的area，当鼠标位于由区域分隔的区域上时，我显示相应的图像。 但是有一个问题，当我把鼠标放在上面时，需要一段时间（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>

$（'.mandala area'）。每个（函数（）{
//将操作分配给鼠标悬停事件
$（此）.mouseover（函数（e）{
var image=$（this.attr（'id'）.replace（'area_uu'，''）；
$（'#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'）；
});
});

曼荼罗像这样：

鼠标悬停时显示的图像如下所示：

---

谢谢你的帮助

根据我的建议，我已经做了一把基本的粗小提琴。这还不是很顺利，但这只是为了证明我的建议的概念

我所做的就是使用一个透明的屏幕作为图像地图，根据悬停的区域更改背景图像

代码片段如下所示

$（“#区域_图像1”）.mouseover（函数（e）{
$（'.mandala'）.css（“背景”，“url”（）http://i.stack.imgur.com/xypLJ.png“）无重复中心”）；
});
$（“面积图像1”）.mouseout（函数（e）{
$（'.mandala'）.css（“背景”，“url”（）http://i.stack.imgur.com/A690W.png')");
});
.mandala{
背景图像：url（“http://i.stack.imgur.com/A690W.png");
显示：内联块；
}
#曼荼罗{
不透明度：0.5；
}

也许每个事件都不是最好的解决方案。您是否尝试通过每个区域的活动。然后是$（“#laviedansature”）.onmouseover=function（）{monImage1.css（'display'，'block'）}这里有一个建议。。。为什么不在图像前面的透明屏幕上映射区域，并基于悬停在局部区域上，更改背景图像？