0

我有一个问题：我有一个内联导航菜单：

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

“highlight” div 是一个绝对定位的 div，它必须突出显示水平移动的导航的指向 li 元素。

现在我想跟随鼠标位置移动它。

我编码了这个

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

UpdateX 函数在哪里：

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

但这仅适用一次，当您将鼠标放在“导航”内时。如果要更新 div 位置，则必须将指针移出“导航”并重新悬停在其上。

我该如何解决？希望已经清楚...

提前致谢

4

1 回答 1

0

我在这里有一个这个功能的例子：http: //code.coloresefimeros.com/slide-hover.html

看看示例代码，它会帮助你（涉及的 JS 文件是http://code.coloresefimeros.com/js/slide-hover.js）

于 2012-04-15T16:12:03.833 回答