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

jQuery悬停图像的特定区域

1 个答案: