階級運行的jQuery通過jQuery

我有這樣的jQuery代碼滾動和添加類.scrolled到頭部後改變從光一個img src屬性黑暗版新增添加一個白色背景的頭，如果.scrolled類存在，或者如果它徘徊：階級運行的jQuery通過jQuery

.header:hover, .header.scrolled { 
    background: #fff 
}

最後，我還需要與黑暗的版本更換標識，如果頭徘徊，但.scrolled類是不自從otherwi以來我最終將在白色背景上使用光標誌。這是jQuery的，我想，但它也將觸發，如果.scrolled類存在：

$j(".header").not("[scrolled]").hover(function(){ 
    $j(".header .logo img").attr("src", "http://[...]/logo_dark.svg"); 
}, function(){ 
    $j(".header .logo img").attr("src", "http://[...]/logo_bright.svg"); 
});

我怎樣才能確保如果.scrolled還沒有被添加到頭部這最後的jQuery只觸發？

來源

2017-03-06 loeffel

您可能能夠使用CSS background-image屬性，然後通過CSS你改變背景顏色，同時改變它。（我沒有試過這個，所以只是一個評論，看它是否可行）。 –

或者，您可以在頁面上包含這兩個圖像，然後通過CSS顯示/隱藏它們。這也有一個優點，即圖像將被預先加載，因此在加載其他圖像時不會出現延遲。 –

這是什麼？ '.not（「[滾動]」）'你的意思是'.not（「。滾動」）'？ –

您可以使用jQuery的.hasClass（）首先檢查您的標題是否具有滾動類，如果是，則只更改徽標圖像src。

編輯回覆評論：

不用擔心，只要確保你把.hasClass（）檢查周圍的懸停功能。事情是這樣的：

if (!$j(".header").hasClass("scrolled")) { 
    $j(".header").hover(function(){ 
     $j(".header .logo img").attr("src", "http://[...]/logo_dark.svg"); 
    }, function(){ 
     $j(".header .logo img").attr("src", "http://[...]/logo_bright.svg"); 
    }); 
}

我是新來的StackOverflow，這麼多道歉，如果格式是可怕在這裏。

來源

2017-03-06 11:31:30 Ffion

但是src也需要在懸停時進行更改，而不僅僅是滾動的類存在。但是，如果滾動的類存在，它不會在懸停時更改。 – loeffel

從$j(".header").not("[scrolled]")您的選擇更改爲 $j('.header:not(.scrolled)')

$j('.header:not(.scrolled)').hover(function(){ 
    $j(".header .logo img").attr("src", "http://[...]/logo_dark.svg"); 
}, function(){ 
    $j(".header .logo img").attr("src", "http://[...]/logo_bright.svg"); 
});

來源

2017-03-06 12:04:43

這兩種解決方案都遇到了與我的方法相同的問題：如果將鼠標懸停在滾動狀態下的標題之外，那麼徽標img將在不應該時變爲輕型版本：http://codepen.io/vit6/pen/xqERea – loeffel

階級運行的jQuery通過jQuery

回答

相關問題