更改使用jQuery CSS懸停性能不工作

我知道我失去了一些東西明顯，我得到這個職位的一些誘人的提示：更改使用jQuery CSS懸停性能不工作

CSS hover selector for background-color not working after dynamic change of background-color with jquery

但我還是太新的jQuery看到的只是我做錯了什麼。如此快速的背景：

開始關閉和調整了這個樣本下拉菜單：http://www.w3csolutions.com/website-resources/Horizontal-Menu/jQuery-Menu/smoth-jQuery-menu/的好辦法的

部分是這樣的：

HTML File 
     <ul class="le_menu_bgcolor le_menu_topUl"> 
       <li class=" le_menu_shape_left le_menu_fgcolor"> 
        <p>Left</p> 
        <p class="le_menu_aHover"> 
         <A href="#tabs1">Left Tab</A> 
        </p> 
       </li> 
       <li class="le_menu_shape le_menu_fgcolor"> 
        <p>Center</p> 
        <p class="le_menu_aHover"> 
         <A href="#tabs2">Center Tab</A> 
        </p> 
       </li>     
       <li class=" le_menu_shape_right le_menu_fgcolor"> 
        <p>Right</p> 
        <p class="le_menu_aHover"> 
         <A href="#tabs3">Right Tab</A> 
        </p> 
       </li>     
      </ul> 

CSS File 
.le_menu_fgcolor.ui-state-default { 
    background:#e40e7d;   
} 

.le_menu_fgcolor.ui-state-hover { 
    background:#ff0e7d; 
}

這工作正常，我得到的粉紅色默認的顏色，而當我將鼠標懸停在任何一個下拉元素上，它們變成略微不同的粉紅色。

現在我想打一個函數來更改配色方案後 - 事實：

JS/JQuery的功能setMenuDropdownTabColor（defaultColor，hoverColor）{

$('.le_menu_fgcolor.ui-state-default').css('background', defaultColor); 
    $('.le_menu_fgcolor.ui-state-hover').css('background', hoverColor);

當我運行這個功能默認狀態會按照我所傳入的進行更改，但懸停變成與默認狀態相同。如果我將默認狀態註釋掉，懸停會被忽略，並且正常使用舊的粉紅色值。如果我將懸停狀態註釋掉，則新的默認狀態仍會覆蓋懸停屬性。檢查器視圖顯示覆蓋顏色正常，但懸停不顯示任何地方，覆蓋或沒有（當我懸停在選項卡上，以便它確實顯示ui-state-hover標記正在計算）

我提到的第一篇文章提出了幾件事

a）在CSS上設置一個！important。我試過在CSS中，但它沒有效果

b）覆蓋.hover它的自我。我試過了：

$（'.le_menu_fgcolor'）.css（'background'，'＃FFFF00'）.hover;

和一些更多的排列，但他們完全覆蓋整個類的風格，而不僅僅是懸停。我猜的原因是，這只是一個.hover在CSS中，但我實際上跨越了一個jQuery庫字段？

這篇文章說的是有道理的，事情是越來越內聯，但我不明白爲什麼默認狀態覆蓋工作，如果是這樣的話，或爲什麼我不能看到懸停的顏色在任何地方檢查員

是的，我試着關閉瀏覽器然後再打開。

任何想法或建議？

來源

2014-04-08 Daniel Cazan

你爲什麼不使用CSS？ – Albzi

我在做最初的設置，但CSS並沒有爲這些值添加變量（至少不容易，其他文章一直暗示它是一個不允許的嘗試）。所以我在CSS中設置了默認主題，然後嘗試使用JS/JQuery在其他主題之間切換 –

好的，以及我已經回答了:) – Albzi

而不是使用jQuery來做一個簡單的任務，如懸停CSS上的屬性，使用CSS？

.le_menu_fgcolor:hover{ 
    background:#ffff00; 
}

您可以使用jQuery這樣雖然：

$(".le_menu_fgcolor").hover(
    function() { 
    $(this).css('background', '#FFFF00'); 
    }, function() { 
    $(this).css('background', '#FF0000'); 
    } 
);

第二function是當你移開鼠標會發生什麼。

通過什麼我認爲您的評論是說，你想是這樣的：

$(document).ready(function(){ 

    //The styles you want to overwrite the CSS with 
    $('.le_menu_fgcolor').css(
    { 
     "background": "#ff0000", 
     "color": "#000000", 
     "height": "50px" 
    } 
); 

    //Hover styles 

    $(".le_menu_fgcolor").hover(
    function() { 
     $(this).css('background', '#FFFF00'); 
    }, function() { 
     $(this).css('background', '#FF0000'); 
    } 
); 

});

來源

2014-04-08 08:50:18 Albzi

剛剛嘗試過，它似乎編輯它沒有打破其他腳本（搖擺！），雖然它似乎沒有生效，直到第一次鼠標懸停？在頁面初始化過程中，覆蓋頁面被截斷了，但頁面是以css默認顏色顯示的？ –

有點困惑，對不起！你的意思是你想讓隱藏的樣式在原來的頁面加載中出現？但CSS是覆蓋？ @DanielCazan – Albzi

所以我最希望的是，無論何時觸發該功能，頁面上的所有顏色樣式（包括懸停）都會更改爲新樣式。此時該函數在.ready期間被觸發，所以在css之後，所有的東西都被初始化了。目前一切都以粉紅色進行，直到我將鼠標懸停在這些東西上，並且您的代碼已經啓動並按預期方式將內容更改爲紅色和黃色 –

$(".le_menu_fgcolor").hover(function(){ 
    $(this).css("background-color","#ff0e7d"); 
    })

來源

2014-04-08 08:50:21 Rahi

謝謝Rahi！運行到與BeatAlex相同的問題（不會立即覆蓋最初的css），但運行正常，而不會破壞其他腳本:) –

更改使用jQuery CSS懸停性能不工作

回答

相關問題