JSFiddle - React, Tailwind, and code Playground
HTML
<div id="meuMenu" style="position: relative; height: 45px; background: #00f; color: #fff;">
<span>Item A</span> | <span>Item B</span> | <span>Item C</span> | <span>Item D</span>
<div id="meuDiv" style="position: absolute; width: 45px; height: 5px; bottom: 0px; background: #fff;"></div>
</div>
JavaScript
//
//Alerta! Não foi testado com IE8-, só com IE9+. Os outros browsers estão OK!
//
var ultX = 0, ultT, percentualConcluido = 0, meuDiv, meuMenu, meuMenuLeft,
alcancouOCursor = true, primeiraVez = true;
//prepara algumas funções necessárias para animação, temporização e localização
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) { return window.setTimeout(function () { return callback(+new Date()); }, 1000 / 60); });
}
if (!Date.now)
Date.now = function () { return (+new Date()); };
function elementLeft(element) {
//https://github.com/carlosrafaelgn/GraphicalFilterEditor/blob/master/Common.js
var left;
if (element.getBoundingClientRect) {
left = element.getBoundingClientRect();
left = left.left + window.pageXOffset;
} else {
left = 0;
while (element) {
left += element.offsetLeft;
element = element.offsetParent;
}
}
return left;
}
function meuMenu_MouseEnter(e) {
//armazena a coordenada X (relativa a meuMenu) para animar
ultX = e.pageX - meuMenuLeft;
//não deixa meuDiv passar do fim de meuMenu
if (ultX > (meuMenu.clientWidth - 45))
ultX = (meuMenu.clientWidth - 45);
//
//esse bloco if/else pode ser removido, caso desejado...
//
if (primeiraVez) {
primeiraVez = false;
} else {
//determina se realmente é necessário iniciar uma animação,
//conforme a distância entre o cursor e meuDiv
var meuDivLeft = elementLeft(meuDiv) - meuMenuLeft;
if (Math.abs(meuDivLeft - ultX) < 50)
return true;
}
//reinicia a animação
alcancouOCursor = false;
ultT = Date.now();
requestAnimationFrame(animaDiv);
return true;
}
function meuMenu_MouseMove(e) {
//armazena a coordenada X (relativa a meuMenu) para animar
ultX = e.pageX - meuMenuLeft;
//não deixa meuDiv passar do fim de meuMenu
if (ultX > (meuMenu.clientWidth - 45))
ultX =...