当用户将鼠标悬停在图像上时，如何使用户的光标跳转到页面上的特定坐标？ [复制]答案

【问题标题】：How can I make the cursor of a user jump to a specific coordinate on the page when they hover over an image? [duplicate]当用户将鼠标悬停在图像上时，如何使用户的光标跳转到页面上的特定坐标？ [复制]
【发布时间】：2016-06-26 22:57:35
【问题描述】：

我正在尝试制作一个脚本，当用户将鼠标悬停在图像上时会改变他们的鼠标位置，例如如果我将鼠标悬停在图像上，他们的鼠标会被拖到某个文本下方，有什么方法可以做到这一点?

【问题讨论】：

你能添加一些代码吗？
请搜索类似的堆栈溢出问题，如http://stackoverflow.com/questions/512528/set-cursor-position-in-html-textbox
@morels 没有提到文本框，只是一个图像悬停（跳转到图像悬停）-也许你应该阅读这个问题..
你是对的@RachelGallen，粘贴的链接是wong。正确的（重复的）链接是：http://stackoverflow.com/questions/4752501/move-the-mouse-pointer-to-a-specific-position
@charlietfl OPs 的问题一开始就很模糊，我怀疑您能否明确说明 OP 想要什么，我认为我提供的滚动到标签的答案足以满足满足他/她的需求

标签： javascript jquery html css

【解决方案1】：

试一试。我用过小图像。当您将鼠标悬停在它们上时，它们会滚动到不同的文本 div（在 mo 的 div 中没有太多文本，但您会看到图片）

$(document).ready(function() {
  $(".scroll").hover(function(event) {
    $('html,body').animate({
      scrollTop: $(this.hash).offset().top
    }, 500);
  });
});

#btm {
  background-color: #21b81e;
  width: 50%;
  height: 300px;
}
#mid {
  background-color: #2d80e8;
  width: 50%;
  height: 300px;
}
#tp {
  background-color: #c00;
  width: 50%;
  height: 300px;
}
img {
  width: 25px;
  height: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<body>

  <div>
    <p><a id="top">Hover over an img:</a>
      <a href="#middle" class="scroll"><img src="http://www.musicmatters.ie/images/4.jpg" alt="middle" title="middle"></a>
      <a href="#bottom" class="scroll"><img src="http://www.musicmatters.ie/images/3.jpg" alt="bottom" title="bottom"></a>
    </p>
    <div id="tp">Top</div>
    <p><a id="middle">Hover over an img:</a>
      <a href="#top" class="scroll"><img src="http://www.musicmatters.ie/images/11.jpg" alt="top" title="top"></a>
      <a href="#bottom" class="scroll"><img src="http://www.musicmatters.ie/images/3.jpg" alt="bottom" title="bottom"></a>
    </p>
    <div id="mid">Middle</div>

    <p>
      Hello my name is rachel Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
      <br>
      <strong>Note that this paragraph has no scroll class, so when you hover over the images, it is not scrolled to, but you CAN add a scroll class anywhere (with a hashtag). </strong>
    </p>
    <p><a id="bottom">Hover over an img:</a>
      <a href="#top" class="scroll"><img src="http://www.musicmatters.ie/images/11.jpg" alt="top" title="top"></a>
      <a href="#middle" class="scroll"><img src="http://www.musicmatters.ie/images/4.jpg" alt="middle" title="middle"></a>
      <div id="btm">Bottom</div>
  </div>


</body>

Fiddle

【讨论】：