Nordborn
@Nordborn
Frontend

Как рассчитать расстояние от курсора до краев дива?

Всем привет.

Помогите сделать так, что бы при наведении на див к нему добавлялся класс, а при отдалении от него на N пикселей он бы убирался. С первой частью разобрался, но вот вторая ставит в ступор.

Вот тут шаблончик набросал: https://jsfiddle.net/js4hqxhc/
  • Вопрос задан
  • 386 просмотров
Решения вопроса 1
Inkognitoss
@Inkognitoss
Full-stack разработчик.
Скорее всего для вашей задачи этого не нужно, но раз вы задали такой вопрос, то вот:
$('.hover').mouseover(function(){ //Понимаете, что обработчик mousemove стартанет только когда вы наведете на элемент.
      var $el = $(this);
      $(document).mousemove(function(e){
    	var X = e.pageX; // положения по оси X
    	var Y = e.pageY; // положения по оси Y
      if(
      !(//Уберете эту строчку и закрывающую скобку не забудьте, то условие инвертируется. 
      Y > $el.offset().top && 
      Y < $el.offset().top+$el.height() &&
      X > $el.offset().left && 
      X < $el.offset().left+$el.width()
      )
      ){
          	//Код который будет выполнятся, когда курсор вне блока
            console.log('Курсор вне блока');
      }
    
});    
    });
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@hscode
Есть самый простой вариант.
Узнать позицию дива.
Узнать его высоту ширину.
И при каждом движение мыши делать проверку входит ли позиция курсора в эти данные.
Ответ написан
miraage
@miraage
Старый прогер
Вообще-то, это делается на CSS.

// EDIT

Через псевдоэлемент создайте контейнер нужных размеров и от него пляшите.
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы