Question

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

<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)
}
);
}

但是当你将鼠标放在“nav”中时，这只能工作一次。如果你想更新div位置，你必须把指针“导航”并重新悬停在它上面。

我该如何解决？希望能够清楚......

先谢谢

Answer 1

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

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

在连续悬停时更新div的“left”属性

1 个答案: