Прикрепить div к курсору при наведении курсора на родительский div

У меня есть галерея слайдеров (с использованием flickity) с X количеством ячеек галереи (div). Внутри каждого div есть изображение и видео, которые отображаются при наведении. Также есть некоторый текст, который отображается только при наведении. Я хочу, чтобы текст прилипал к курсору, зависая внутри div галереи.

Мне удалось прикрепить текст к курсору в первой ячейке галереи, но в остальных он не работает. Было бы нехорошо добавлять новый код JS для каждой ячейки.

См. Скрипт: https://jsfiddle.net/jxnw4pe0/

Это мой JS:

var mydiv1=document.getElementById("myDiv1");
document.addEventListener('mousemove', function (e) {
    var x = e.pageX;
    var y = e.pageY;
    mydiv1.style.top = y + 'px';
    mydiv1.style.left = x + 'px';
});

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
75
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

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

Вы отметили вопрос с помощью jquery, поэтому я использовал его, так как он проще.


// Use JQUERY mousemove event on gallery cells
$(".gallery-cell").mousemove( function(e) {

  // Select hovertext element within gallery cell
  $popup = $(this).find(".hovertext").first();
  
  // Get offset from top
  var eTop = $(this).offset().top;
  var eLeft = $(this).offset().left;
  
  var x = e.pageX;
  var y = e.pageY;
  
  // Set CSS
  $(this).find(".hovertext").css({top: y -eTop, left: x - eLeft});

});
h1 {color:#fff}
.gallery{position:relative;}
.gallery-cell {
  width:500px;
  height:200px;
  display:block;
  background: red;
  position:relative;
  margin: 5px 0;
}
.gallery-cell-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.gallery-cell-video {
    position: absolute;
    object-fit: cover;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
.hovertext {
    position: absolute;
    top: 0;
    left:0;
    z-index: 100;
    overflow:hidden;
    white-space: nowrap;
}

#something .hovertext {visibility: hidden;}
#something:hover .hovertext {visibility: visible;}

#something .gallery-cell-video {visibility: hidden;}
#something:hover .gallery-cell-video {visibility: visible;}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "gallery">
    <div class = "gallery-cell" id = "something">
    <img class = "gallery-cell-image" src = "https://agoberg.tv/tmp/blue.jpg" />
    <video class = "gallery-cell-video" src = "https://agoberg.tv/video/B_vs_W.mp4" autoplay muted loop></video>
    <div class = "hovertext" id = "myDiv1"><h1>Some Text 1</h1></div>
    </div>
    
    <div class = "gallery-cell" id = "something" id = "something">
    <img class = "gallery-cell-image" src = "https://agoberg.tv/tmp/red.jpg" />
    <video class = "gallery-cell-video" src = "https://agoberg.tv/video/B_vs_W.mp4" autoplay muted loop></video>
    <div class = "hovertext" id = "myDiv1"><h1>Some Text 2</h1></div>
    </div>
    
    <div class = "gallery-cell" id = "something" id = "something">
    <img class = "gallery-cell-image" src = "https://agoberg.tv/tmp/grey.jpg" />
    <video class = "gallery-cell-video" src = "https://agoberg.tv/video/B_vs_W.mp4" autoplay muted loop></video>
    <div class = "hovertext" id = "myDiv1"><h1>Some Text 3</h1></div>
    </div>
</div>

Это здорово спасибо! Я просто добавил смещение слева в jQuery, а также чтобы он работал внутри галереи слайдеров. Финальная рабочий пример: jsfiddle.net/jxnw4pe0/1

Anders Goberg 22.11.2022 20:05

Рад, что это помогло! Удачи с вашим проектом

Oliver Trampleasure 23.11.2022 02:41

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