I have a function that activates when the mouse hovers over a div.
Inside the div, there is a link that spans 100% of its height and width. This link contains an image that the function moves when the grandparent (the div) is hovered over.
The function moves the image to the right before returning it to the center.
When I hover over the div, the function triggers but only moves the image by 5px (one iteration of the function), continuing to move it 5px as I move the mouse around - essentially not looping properly and only executing once per hover.
<div onmouseover="jotArrow(this);" class="latest-entry latest-entry-third" id="news-link-home">
<a class="home-square-link" href="hello.php">Reviews<br/><img src="<?php echo $config['file_path']; ?>/images/squares-arrow.png" width="60px"/></a>
</div>
JS:
var arrowPos = 0;
var Arrow;
function jotArrow(arrow)
{
Arrow = arrow.getElementsByTagName('img')[0];
if (arrowPos < 50) {
arrowPos = arrowPos + 5;
Arrow.style.left = arrowPos + 'px';
setTimeout(jotArrow, 10);
} else {
jotArrowBack(arrow)
}
}
function jotArrowBack(arrow)
{
if (arrowPos > 0) {
arrowPos = arrowPos - 5;
Arrow.style.left = arrowPos + 'px';
setTimeout(jotArrowBack, 10);
}
}
To verify the code's accuracy, I made a slight modification so that it moves an image in a different div (hovering over div1 makes the image in div2 move), and it worked correctly.
My assumption is that the issue may stem from the image being nested inside the div and the mouse hovering over multiple elements. However, I don't see why this would be problematic since the function should execute its entire task on the initial hover without concerning itself with onmouseout events.
I've attempted adding the onmouseover attribute to each of the three elements (div, a, img) individually and simultaneously - yet encountered the same issue.