i have a question: i have an inline navigation menu: <nav> <div id=highlight></div> <ul

Question

0

Asked: June 2, 20262026-06-02T03:22:58+00:00 2026-06-02T03:22:58+00:00

i have a question: i have an inline navigation menu: <nav> <div id=highlight></div> <ul

0

i have a question:
i have an inline navigation menu:

<nav>
    <div id="highlight"></div>
    <ul id="fs_nav">
         <li class="_nav"><a href="#" title="Home" alt="Home">Home</a></li>
         <li class="_nav second"><a href="#" title="About" alt="About">About Us</a></li>
         <li class="_nav second"><a href="#" title="News" alt="News">News</a></li>
         <li class="_nav second"><a href="#" title="Contacts" alt="Contacts">Contacts</a></li>
         <li class="_nav second"><a href="#" title="Projects" alt="Projects">Projects</a></li>
         <li class="_nav second"><a href="#" title="Donations" alt="Donations">Donations</a></li>
     </ul>
</nav>

The “highlight” div is an absolute-positioned div that has to highlight the pointed li elements of the navigation moving horizontally.

Now i would like to move it following the mouse position.

I coded this

// JavaScript Document
$(function() {
// Highlight Moving
var interval;
    $('nav').hover(function(e){
    interval = setInterval(UpdateX(e),100);
    },
    function(){
        clearInterval(interval);}
       );
    }
);

Where UpdateX function is:

function UpdateX(e) {
var width = $('#highlight').width();
var left = e.pageX;
$('#highlight').animate({
    left:left - (width/2)
}
);
}

But this works just once, when you put the mouse inside “nav”. If you want to update the div position you must put out of “nav” the pointer and re-hovering on it.

How can i solve?
Hope to have been clear…

Thanks in Advance