javascript - jQuery 在将鼠标移动到另一个元素上时移动控件

Question

我有一个包含时间范围的 div。移动鼠标时，我还有一个 div 滚动条。当鼠标在时间范围内移动时，我试图将时间控件与滚动一起移动。问题是时间控件不会根据鼠标移动而移动。

这是我做的:

$('#timeTable').on('mousemove', function(e) {
  var xPrev = 600;
  var inc = 0;
  var position = $('#nowTime').offset().left;
  var leftOffset = $(this).offset().left;
  if (xPrev < e.pageX) {
    inc = -255;
  }
  $('#timeTableInner').css('left', -e.clientX + leftOffset + inc);
});

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

<time id="nowTime">10:00</time>
<div id="timeTable">
  <div id="timeTableInner">
 <ul id="timeText">
     <li class="t0000"><span class="hourText">0:00</span></li>
     <li class="t0015">&nbsp;</li>
     <li class="t0030">&nbsp;</li>
         ------------
      <li class="t2400"><span class="hourText">24:00</span></li>
  </ul>
  </div>
</div>

Answer 1

请检查这个。

这是你想要的吗？

check my updated fiddle here

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

<time id="nowTime">10:00</time>
<div id="timeTable">
    <div id="timeTableInner">
        <ul id="timeText">
            <li class="t0000"><span class="hourText">0:00</span></li>
            <li class="t0015">&nbsp;</li>
            <li class="t0030">&nbsp;</li>
            <li class="t2400"><span class="hourText">24:00</span></li>
        </ul>
    </div>
</div>