Как получить положение мыши относительно фона img

Мне нужно получить положение мыши на фоновом изображении div.

Это css:

width: 100%;
height: 100%;   
background-image: url("default.png");
background-size: contain;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;

Это html: <div id = "div"></div>

Любая помощь будет действительно оценена.

-----------------Редактировать-------------------- img имеет фиксированный размер, поэтому он не заполняет весь экран браузера.

javascript html css image

27.05.2019 20:33

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Используйте Прослушиватель событий!

div.addEventListener("mousemove", function(e) {
  console.info(e.layerX, e.layerY)
}, false)

#div {
  width: 400px;
  height: 400px;
  border: 1px black dotted
}

<div id = "div"></div>

27.05.2019 21:44

Если вам нужна только позиция внутри определенного элемента, вы можете использовать:

let x = event.clientX;
let y = event.clientY;

Если вам интересно, откуда взялось event:

document.querySelector("#div").addEventListener("click",(event)=>{
  let x = event.clientX;
  let y = event.clientY;
});

И тогда вы можете делать все, что хотите, с x и y.

Посмотрите на пример:

document.querySelector("#div").addEventListener("click",(event)=>{
  console.info(`x: ${event.clientX}, y:${event.clientY}`);
});

body{
  margin:0;padding:0;
}

#div {
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
}

<div id = "div"></div>

27.05.2019 21:46

Другие вопросы по теме

Как сделать две кнопки встроенными, если каждая из них имеет разную форму?

Сделать контейнер немного выше нижнего колонтитула

Попытка получить внутреннее текстовое содержимое элемента span

Невозможно присвоить значение тернарным оператором

Вопрос о вызове функций из других файлов - Javascript

Измените цвет переключателя и выберите первый элемент при загрузке

Переключение между различными типами кнопок

Загрузчик для определенного раздела в HTML

Angular ngfor устанавливает пустую сетку, если условие соответствует

Как перенаправить со страницы на страницу в PHP 7?

Как получить положение мыши относительно фона img

Ответы 2

Другие вопросы по теме

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