用滚动鼠标移动

Question

我正在开发一个页面，其中某些元素触发悬停框出现在它们下面。还有一个条件检查所有悬停框是否在视口中，如果超过视口，则向下滚动。问题是，当它向下滚动时，鼠标保持在相同位置，因此元素不再悬停在上面，因此框消失，导致页面自动滚动回原始位置，所以现在它正在盘旋再次，它会陷入这个循环中，你可以看到这个循环在jsFiddle中得到了证明。只需将鼠标悬停在输入上，您就会明白我的意思。我需要的是鼠标向下移动与页面向下滚动的数量相同。但是你无法在javascript中强制移动鼠标。所以我不知道如何解决这个问题。如果有人有任何想法，请告诉我，或改编jsFiddle。谢谢。这是javascript：

$('input').mouseout(function(){
  $('#box').hide();
});
$('input').mouseover(function(e){

 element = e.target

 eleTop =  $(element).offset().top + 27;
 eleLeft = $(element).offset().left;

 $('#box').css({

    top: eleTop + "px",
    left: eleLeft + "px",
});

 $('#box').show();

if($('#box').offset().top + $('#box').height() + 27 > ($(window).scrollTop() + window.innerHeight)){
    $('html,body').animate({
      scrollTop:10 + $(window).scrollTop() + 
     ($('#box').offset().top + $('#box').height() + 27) - 
     ($(window).scrollTop() + window.innerHeight)});

   }
});