У меня есть галерея слайдеров (с использованием 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 работать со всеми ячейками галереи, будет высоко оценена.
Это работает, как вы просили, вам нужно добавить прослушиватель событий ко всем элементам с классом .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