解決：jquery .hover（）混淆

我目前正在編程我的投資組合頁面，我遇到了懸停狀態的一個奇怪的行爲，我不明白。我在頁面頂部的導航欄中有一些鏈接。鏈接完全定義爲：懸停和一切。現在我還希望當鼠標懸停在鏈接引用的網站的不同部分上時，鏈接的顏色會發生變化。所以我寫了這一點：解決：jquery .hover（）混淆

/* Navlink colors */ 
$('#portfolio').hover(function() { 
     $('#portLink').css('color','#FF9900'); 
    }, function() { 
     $('#portLink').css('color','inherit'); 
}); 
$('#about').hover(function() { 
     $('#aboLink').css('color','#FF9900'); 
    }, function() { 
     $('#aboLink').css('color','inherit'); 
}); 
...

起初它似乎工作，但是當你滾動到博客，然後將鼠標移動到導航的CSS：懸停似乎沒有工作了。這是我的測試網站：

http://www.henning-marxen.de/test/index.html（不要笑那些佔位符^^）你知道它爲什麼會這樣嗎？我很困擾。非常感謝你提前。

來源

2014-04-05 H.Marxen

請檢查您的HTML標記。我覺得你已經在href中使用#portLink，而應該像

我無法在chrome win7上重現你的問題 –

沒有Id =「portLink」和一個href =「＃portfolio」錨鏈接應該在那裏。 @沃爾夫嗯，它似乎在鍍鉻工作。 –

你需要的JS本混合和CSS。在你的CSS中，你需要將你的樣式應用於懸停狀態，但也需要一個類，我將這個例子稱爲current。

.nav-link:hover, 
.nav-link.current{ 
    color:#FF9900; 
}

然後你JavaScript需要做的就是添加或刪除取決於類上該網站的一部分，已滾動至：

var navLinks = $('.nav-link'); 

//each time the user scrolls, reset all links by removing class. 
navLinks.removeClass('current'); 

//Then find the link that needs highlighting and add the class to it. 
//There obviously needs to be some logic here to filter the correct link. 
navLinks.filter('[href="#portfolio"]').addClass('current');

來源

2014-04-05 14:25:14 Ryan

謝謝!!!!!!!!! 11111eleven我剛剛用.addClass（）和.removeClass（）替換了.css（）。使用過濾器等可能更優雅，但它現在起作用^^謝謝！ –

@ H.Marxen不客氣:) – Ryan

您應該使用CSS這一點，沒有jQuery的：

#portLink:hover, #about:hover { color: #FF9900; }

或（更明確地匹配您的JS）：

#portfolio:hover #portLink, #about:hover #aboLink { color: #FF9900; }

如果您的鏈接元素是那些最初的不後代選擇器，請使用+對它們進行分組（如此小提琴中所示）：http://jsfiddle.net/B8Xuw/ *注意，這裏假定它們是兄弟姐妹，而不是父母>子女

#portfolio:hover + #portLink, #about:hover + #aboLink { color: #FF9900; }

來源

2014-04-05 14:01:41

試試這個：

/* Navlink colors */ 
    $('#portfolio').hover(function() { 
     $('[href="#portfolio"]').css('color','#FF9900'); 
    }, function() { 
     $('[href="#portfolio"]').css('color','inherit'); 
    }); 
    $('#about').hover(function() { 
     $('[href="#about"]').css('color','#FF9900'); 
    }, function() { 
     $('[href="#about"]').css('color','inherit'); 
    });

來源

2014-04-05 14:06:30 Charlie

謝謝，但它沒有工作。 -.- –

解決：jquery .hover（）混淆

回答

相關問題