uam
@uam

Как правильно отследить курсор относительно элемента?

Имеется 2 строки продукции, по 4 итема в каждой строке. И мне нужно при наведении на итем (не важно какой) отобразить в нем же подсказку которая будет следовать за курсором мыши, но только в рамках этого конкретного итема. С первым рядом проблем не возникает. Да и вообще по оси Х проблем нет, а вот по Y начинаются. В первом ряду все отображается корректно, однако когда я навожу мышкой на итем второго ряда, то подсказка появляется в итеме первого ряда. Привожу код
$(".products-area .item").mousemove(function(e) {

        var pos = $(this).offset();

        $(this).find(".expand").css({
            "display": "block",
            "top": e.pageY - pos.top,
            "left": e.pageX - 300
        });

        console.log(offleft);
    });

PS добавил третий ряд и навел на итем в этом ряду мышкой, подсказка все равно маячит в первом ряду
  • Вопрос задан
  • 375 просмотров
Решения вопроса 1
@Inwork277
"top": e.pageY - pos.top,
"left": e.pageX - 300


Если у Вас следует за курсором внутри бокса по оси X нормально, значит, как я понял "left" expand'a отсчитывается от левого края не .item, а какого-то из врапперов. А значит и "top" задается относительно враппера, отсюда и проблема.

Укажите для .item - position: relative; и перепишите "left"
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы