Javascript jQuery悬停图像的特定区域

我最终搜索了一个代码，将其放入我现有的代码中。基本上，我有一组图像，悬停时会触发div。我为每个图像制作了父javascript悬停、延迟和动画函数。PNG图像不是方形、矩形或圆形，而是时尚的，所以当我将鼠标悬停在透明区域的任何部分时，就会触发div。我不能尝试图像贴图坐标，因为我有百分比宽度的图像，所以我需要一个简单的函数，可以在现有图像下添加填充，这样悬停只能在矩形或方形部分工作

这是我的网站部分，我想在这里带来变化

http://www.mythstreet.com/#our-services

到目前为止，我的代码：

jQuery( document ).ready(function($) {
    $("#svbx1").hover(function () {
        $("#svrs2").stop(true, true).slideUp();
        $("#svrs3").stop(true, true).slideUp();
        $("#svrs4").stop(true, true).slideUp();
        $("#svrs1").slideDown();
    }, function () {
        $("#svrs1").delay(20000).slideUp();
    });
    $("#svbx2").hover(function () {
        $("#svrs1").stop(true, true).slideUp();
        $("#svrs3").stop(true, true).slideUp();
        $("#svrs4").stop(true, true).slideUp();
        $("#svrs2").slideDown();
    }, function () {
        $("#svrs2").delay(20000).slideUp();
    });
    $("#svbx3").hover(function () {
        $("#svrs1").stop(true, true).slideUp();
        $("#svrs2").stop(true, true).slideUp();
        $("#svrs4").stop(true, true).slideUp();
        $("#svrs3").slideDown();
    }, function () {
        $("#svrs3").delay(20000).slideUp();
    });
    $("#svbx4").hover(function () {
        $("#svrs1").stop(true, true).slideUp();
        $("#svrs2").stop(true, true).slideUp();
        $("#svrs3").stop(true, true).slideUp();
        $("#svrs4").slideDown();
    }, function () {
        $("#svrs4").delay(20000).slideUp();
    });

    });

---

像这样的怎么样

你可以使用绝对位置div，当你越过它们时触发

CSS

---

请为您的问题创建一个简单的提琴。不要期望我们在您的站点上检查元素..也要使用类而不是id。。这可以在更少的线路中实现

.myimage {
    width: 300px;
    height: 300px;
    position: relative;
}
.face {
    width: 60px;
    height: 90px;
    border: 1px solid black;
    top: 70px;
    left: 70px;
    position: absolute
}
.hat {
    width: 40px;
    height: 40px;
    border: 1px solid red;
    top: 20px;
    left: 100px;
    position: absolute
}
.foot {
    width: 60px;
    height: 90px;
    border: 1px solid green;
    top: 110px;
    left: 200px;
    position: absolute
}
img {
    width: 100%;
    height: 100%;
}
.face:hover {
    background-color: red;
}
.hat:hover {
    background-color: blue;
}
.foot:hover {
    background-color: green;
}