jQuery的懸停效果不會在谷歌瀏覽器工作在某些計算機

這裏是爲了什麼，我就jQuery的懸停效果不會在谷歌瀏覽器工作在某些計算機

我遇到的問題工作與某個鏈接與Chrome瀏覽器的導航鼠標懸停（懸停）的影響。似乎jquery在所有其他瀏覽器上工作正常，而不是Chrome。

http://squ4reone.com/domains/ottawakaraoke/index.php

但這裏是踢球，我已經嘗試過在12臺不同的電腦，他們都表現出了現場罰款，只有2臺電腦（其中包括客戶的）必須顯示在左側的導航問題。

有沒有人有什麼想法？

來源

2013-03-06 CampbeII

到底是什麼問題？你想要發生什麼？發生了什麼呢？ – 2013-03-06 00:29:43

當你提到「客戶」時，你的意思是什麼？ – 2013-03-06 00:30:00

他正在做的網站的客戶端 – kingdomcreation 2013-03-06 00:30:19

你應該考慮用CSS解決這個問題，而不是基於mouseover改變類。

如果你改變你的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; 
}

那麼你應該通過消除基於鼠標懸停切換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/）

來源

2013-03-06 00:32:29

我在想同一條線，爲什麼jQuery ... – kingdomcreation 2013-03-06 00:33:55

我還注意到，當你點擊該項目（所以它滾動到頁面的一部分）項目disapear ...再次在鉻。所以你必須選擇它們或將鼠標放在它們上面以便再次顯示徽標 – kingdomcreation 2013-03-06 00:35:30

當試圖調試這樣的問題時，最好確保代碼驗證。

您可以檢查此：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"); 
});

來源

2013-03-06 00:35:36 Toby

最初我還問過「爲什麼使用jQuery？」像chirs-mv，但正如我所看到的，他們正在改變其他元素的類別而不是盤旋，這是更好的解決方案並回答了問題。 – iGanja 2013-03-06 00:54:05

我知道這是要健全有點明顯，但貴客戶端中啓用JavaScript？這可以在設置/高級設置/隱私/內容設置/ JavaScript下的Chrome中找到。

使用CSS代替JavaScript的chris-mv的回答是比使用JQuery更好的解決方案。

來源

2013-03-06 00:37:45 Melon

enter image description here