jQuery悬停图像的特定区域答案

【问题标题】：jQuery hover specific area of an imagejQuery悬停图像的特定区域
【发布时间】：2014-09-15 01:46:12
【问题描述】：

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

    });

【问题讨论】：

请为您的问题创建一个简单的小提琴。不要指望我们会检查您网站上的元素..
也使用类而不是 id's.. 这可以用更少的行来实现

标签： javascript jquery html css jquery-hover

【解决方案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;
}

【讨论】：