Attach a div to cursor when hovering inside a parent div-CodePudding

I have a slider gallery (using flickity) with X amount of gallery cells (divs). Inside each div there's an image and a video that gets revealed on hover. There's also some text that only is displayed on hover. I want to make the text stick to the cursor while hovering inside of the gallery div.

I have been able to stick the text to the cursor on the first gallery cell, but it isnt working on the rest. It wouldnt be good code to add new JS code for each cell.

See Fiddle: https://jsfiddle.net/jxnw4pe0/

This is my 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';
});

Any help to make this JS work with all gallery cells would be much appreciated.

CodePudding user response：

This works as you've asked, you need to add the event listener to all elements with class .gallery-cell, and remember to get the offset of the element you're hovered in to show the text at the appropriate point (i.e. if you've scrolled).

You tagged the question with jquery so I've used that as it's simpler.

// 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 x = e.pageX;
  var y = e.pageY;
  
  // Set CSS
  $(this).find(".hovertext").css({top: y -eTop, left: x});

});

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 >
    <div  id="something">
    <img  src="https://agoberg.tv/tmp/blue.jpg" />
    <video  src="https://agoberg.tv/video/B_vs_W.mp4" autoplay muted loop></video>
    <div  id="myDiv1"><h1>Some Text 1</h1></div>
    </div>
    
    <div  id="something" id="something">
    <img  src="https://agoberg.tv/tmp/red.jpg" />
    <video  src="https://agoberg.tv/video/B_vs_W.mp4" autoplay muted loop></video>
    <div  id="myDiv1"><h1>Some Text 2</h1></div>
    </div>
    
    <div  id="something" id="something">
    <img  src="https://agoberg.tv/tmp/grey.jpg" />
    <video  src="https://agoberg.tv/video/B_vs_W.mp4" autoplay muted loop></video>
    <div  id="myDiv1"><h1>Some Text 3</h1></div>
    </div>
</div>