SOURCE

console 命令行工具 X clear

                    
>
console
const mydiv =document.querySelector('.menu');
mydiv.addEventListener('mousemove' , function(e) {
  console.log(e);
  var offsetX = e.clientX - mydiv.clientLeft;
  var offsetY = e.clientY - mydiv.clientTop;
  console.log(offsetX, offsetY);
  
  document.querySelector(".bug").style.top= ((Math.ceil(offsetY/ 42) - 1) * 43) + 'px';
});
<div class="menu">
  <ul>
    <li>123123</li>
  <li>123123</li><li>123123</li><li>123123</li><li>123123</li><li>123123</li><li>123123</li><li>123123</li><li>123123</li></ul>
  <div class="bug"></div>
</div>
html,body{
  height:100%;  
}

*{
  padding:0;
  margin:0;
}

.menu {
  height:100%;
  background:green;
  width:176px;
}

.bug{
    width: 4px;
    background: #209e91;
    position: absolute;
    top: -150px;
    left: 176px;
    -webkit-transition: all .2s ease;
    transition: all .5s ease;
    -webkit-transition-property: top,height;
    transition-property: top,height;
    height: 42px;
    display: block;
    top: 10px;
}

ul > li {
  line-height: 42px;
  background: black;
  border-bottom:1px solid white;
  cursor:pointer;
}