javascript - jQuery 悬停图像的特定区域

Question

我最终搜索了一个代码以放入我现有的代码中。基本上，我有一组在悬停时触发 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();
    });

    });

Answer 1

像这样的东西怎么样FIDDLE .

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

CSS

.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;
}