2010-06-22 232 views
3

我想改變使用Jquery懸停文本的顏色。我認爲我的代碼是正確的,但它現在正在工作。這裏是我的jQuery代碼:JQuery更改文本顏色

$(document).ready(function() { 
    $('#menu li a').hover(function() { 
     $(this).css('color','#ffffff'); 
    }, function() { 
     $(this).css('color', '#97A59E'); 
    }); 
}); 

我的CSS:

#menu li a 
{ 
color:#97A59E !important; 
background-color:#3e4347 !important; 
display: block; 
float: left; 
line-height:2.25em!important; 
text-align:center; 
width:300px; 
} 

和我的網站母版頁:

<ul id="menu"> 
    <li><a id="nav-home" href="<%= Url.Action("Index", "Home") %>">Home</a></li> 
    <li><a id="nav-about" href="<%= Url.Action("About","Home") %>">About</a></li> 
    </ul> 

任何想法?謝謝。

+0

任何錯誤的消息? – helle 2010-06-22 14:35:11

+0

刪除您的css定義中的'!important' – jAndy 2010-06-22 14:38:42

回答

2

我不知道是否jQuery是這樣做的正確方法..你在CSS

#menu li a { color: #97A59E} 
#menu li a:hover { color: #ffffff} 
+0

這工作!但是,我想再添加一個複雜功能。我希望每個#menu li a都是不同的顏色......? – Lars 2010-06-22 16:06:00

+0

我明白了。謝謝!!! – Lars 2010-06-22 16:10:42

+0

我對你是如何做的感興趣。顏色是隨機的嗎? – sjobe 2010-06-22 18:47:04

2

在你的CSS要設置與顏色試過!重要的。這將使其優先於沒有!重要的任何事物。再次嘗試你的代碼,但用顏色後的!重要。即:

$(document).ready(function() { 
    $('#menu li a').hover(function() { 
     $(this).css('color','#ffffff !important'); 
    }, function() { 
     $(this).css('color', '#97A59E !important'); 
    }); 
}); 

我應該補充說,如果您能夠使用純粹的CSS解決方案,Sjobe的答案可能會更好。它仍然很好知道爲什麼 somethign無論如何不起作用。 :)

2
color:#97A59E !important; 

css定義中移除!important部分

+0

那當然認爲它不需要,因爲頁面的其他部分...... :) – Chris 2010-06-22 14:44:24