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

    });

javascript html jquery css jquery-hover
person Junaid Khawaja    schedule 15.09.2014    source источник
comment
Пожалуйста, создайте простую скрипку для вашей проблемы. Не ожидайте, что мы проверим элемент на вашем сайте.   -  person Bla...    schedule 15.09.2014
comment
также используйте классы вместо идентификаторов. Этого можно добиться гораздо меньшим количеством строк   -  person Eric    schedule 15.09.2014

Ответы (1)


arrow_upward
0
arrow_downward

Как насчет чего-то вроде этого 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;
}
person TimSPQR    schedule 15.09.2014