使用鼠标指针移动div

Question

I'm trying to do exactly as it is in this link. (The stripe on the banners with the read more link) https://toyota.jp/vitz

What I tried so far doesn't work as expected. It moves the whole stripe apart from the range.

 $(document).on("click mousemove", ".spec-slider-wrap", function(e) { var x = e.clientX; var y = e.clientY; var newposX = x - 700; var newposY = y - 350; $(".stripe").css("transform", "translate3d(" + newposX + "px," + newposY + "px,0px)"); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <span class="word">More</span> <span class="arrow-wrap"> <span class="arrow-pulse-right"></span> </span> </div> 

Answer 1

here the working code. https://jsbin.com/geyudivuru/edit?html,css,js,output

  <div class="parent" style="">
    <div class="stripe">
      <span class="word">More</span>
        <span class="arrow-wrap">
          <span class="arrow-pulse-right"></span>
        </span>
     <div>
  </div>

.stripe {
  width: 100%;
  background: red;
  position: absolute;
  height: 40px;
  display: none;
}
.parent {
  position: relative;
  height: 400px; 
  background: #ddd;
}

$ = jQuery;
$(document).on("mousemove", function(e) {
  var x = e.clientX;
  var y = e.clientY;
  var newposX = x - 700;
  var newposY = y;
  $('.stripe').css({top: newposY, display: 'block'})
});

$('.parent').mouseleave(function(){
  $('.stripe').css({top: 0, display: 'none'})
})

add styling to divs and you'll get what you need.