これが私が取り組んでいることへのリンクです
私が抱えている問題は、Chromeブラウザでのナビゲーションでのマウスオーバー（ホバー）効果にあります。jqueryは、chromeではなく、他のすべてのブラウザで正常に機能しているように見えます。
http://squ4reone.com/domains/ottawakaraoke/index.php
しかし、ここにキッカーがあります。12台の異なるコンピューターで試してみましたが、すべてサイトが正常に表示され、左側のナビゲーションの表示に問題があるのは2台のコンピューター（クライアントを含む）のみです。
誰かが何が起こっているのかについての考えを持っていますか？
マウスオーバーに基づいてクラスを変更するのではなく、CSS でこれを解決することを検討する必要があります。
CSS を変更した場合:
.inactive{
font-size:115%;
margin-top:3%;
padding:1%;
}
.active{
text-decoration:none;
background:#e1edff;
font-size:115%;
margin-top:3%;
padding:1%;
}
に：
.menu-element{
font-size:115%;
margin-top:3%;
padding:1%;
}
.menu-element:hover {
text-decoration:none;
background:#e1edff;
}
次に、mouseover/leave に基づいて CSS クラスを切り替えるコードを削除し、代わり.menu-elementにすべての要素に対して に設定することで、さまざまなブラウザー間で一貫した動作を得る必要があります。
編集: @iGanja が以下で指摘したように、一部の機能、つまり、メニュー項目に属するセクションにカーソルを合わせるとメニュー項目が強調表示される必要があることに気づきませんでした。
CSS でメニュー自体にマウス オーバー効果を適用し、代わりにイベントからコンテナー ID を削除することをお勧めします。
$('#home').mouseenter(function(){
$('li#NAVhome').removeClass('inactive').addClass('active');
});
$('#home').mouseleave(function(){
$('li#NAVhome').removeClass('active').addClass('inactive');
});
//faqs div
$('#faqs').mouseenter(function(){
$('li#NAVfaqs').removeClass('inactive').addClass('active');
});
$('#faqs').mouseleave(function(){
$('li#NAVfaqs').removeClass('active').addClass('inactive');
});
//book div
$('#book').mouseenter(function(){
$('li#NAVbook').removeClass('inactive').addClass('active');
});
$('#book').mouseleave(function(){
$('li#NAVbook').removeClass('active').addClass('inactive');
});
//connect div
$('#connect').mouseenter(function(){
$('li#NAVconnect').removeClass('inactive').addClass('active');
});
$('#connect').mouseleave(function(){
$('li#NAVconnect').removeClass('active').addClass('inactive');
});
これにより、マウスをセクションに重ねたときのホバリング効果を維持しながら、メニュー効果の信頼性が向上します。構文.toggleClass()の代わりに使用することで、コードを短縮できる場合があります。if..else( http://api.jquery.com/toggleClass/ )
このような問題をデバッグしようとするときは、コードが検証されていることを確認することが常に最善です。
ここで確認できます: http://validator.w3.org/
サイトで検証を実行したところ、必要な属性が欠落しているようです: スクリプト タグに入力してください。
コードを次のように変更してみてください。
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
...
ボーナス ポイントとして、マウスオーバーをリファクタリングできます。
例えばこれの代わりに：
$('#home, li#NAVhome').mouseleave(function(){
$('li#NAVhome').removeClass('active').addClass('inactive');
});
これを行う：
$("ul.nav li").hover(function() {
$(this).removeClass("inactive").addClass("active");
}, function() {
$(this).removeClass("active").addClass("inactive");
});
これは少し明白に聞こえるかもしれませんが、クライアントで JavaScript が有効になっていますか? これは Chrome の [設定]/[詳細設定]/[プライバシー]/[コンテンツ設定]/[JavaScript] にあります。
JavaScript の代わりに CSS を使用するというchris-mvの回答は、JQuery を使用するよりも優れたソリューションです。
1項目クリックするとこんな感じ