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>

「ハイライト」divは、水平方向に移動するナビゲーションのポイントされたli要素を強調表示する必要がある絶対位置のdivです。

次に、マウスの位置に合わせて移動します。

これをコーディングしました

// 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」内に置くと1回だけ機能します。divの位置を更新する場合は、ポインターを「nav」から外して再度ホバーする必要があります。

どうすれば解決できますか？明確になったことを願っています...

前もって感謝します

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 に答える