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;
}