Update: My goal is to prevent the nested div from moving when the mouse exits both it and the parent div. It seems like it is currently shifting because the border somehow extends the parent div further than the nested div. I want to maintain the border.
As the saying goes, a demo speaks volumes.
I have a situation where a div is nested within another div
<div class='parent'>
<div>See me</div>
</div>
This setup includes some styling
.parent {
width: 100%;
border: 1px solid black;
}
.parent div {
display: inline-block;
position: relative
}
There's also some accompanying JavaScript code
var navBar = document.querySelector('div.parent');
var navItems = navBar.querySelector('div');
var moveNav = false;
var overItems = false;
navBar.addEventListener('mouseout', function() { moveNav = false; });
navItems.addEventListener('mouseover', function() { overItems = true; });
navItems.addEventListener('mouseout', function() { overItems = false; });
navBar.addEventListener('mouseover', function() { moveNav = !overItems && true; });
navBar.addEventListener('mousemove', moveToMouse);
function moveToMouse(e) {
if(!moveNav)
return;
navItems.style.left = (e.offsetX - Math.floor((e.offsetX+navItems.offsetWidth)/navBar.offsetWidth) * (e.offsetX + navItems.offsetWidth - navBar.offsetWidth + 10)) + 'px'
}
The objective is to ensure that a portion of the child div stays under the mouse cursor while it is inside the .parent div.*
I'm interested in learning how to prevent the child div from moving once the mouse leaves the .parent div?
In simpler terms, I want it to behave like it does in this fiddle. The main distinction between the two examples is that one has a border around .parent, while the other doesn't.
Additionally, I've observed that the child div jumps instead of moving smoothly. Any suggestions on how to address this issue are appreciated but not mandatory.
*please share any alternative methods to achieve this as well**
**avoid suggesting "use jQuery"