2012-12-20 99 views
5

我想用Zenphoto建立一个照片库。他们使用PHP和一个可以添加自定义menue是这样的:用jquery更改menue的背景颜色

<div id="navmenu"> 
    <?php printCustomMenu('main_menue'); ?> 
    </div> 

我改变在sylesheet整个事情的出现,它看起来像这样:

#navmenu { 
     width: 1000px; 
     height: 42px; 
     margin: 0px auto 30px auto; 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
     text-align: left; 
     font-size: 21px; 
     background-color: #000000 
     } 

#navmenu li { 
     display: inline; 
     } 

#navmenu a { 
     color: #eee; 
     display: inline; 
     line-height: 2em; 
     padding: 0.375em 0.5em; 
     text-decoration: none; 
      } 

#navmenu a:hover { 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
     font-size: 21px; 
     color: #000000; 
     background-color: #ffff33; 
     padding: 0.375em 0.5em; 
      } 

现在我想改变各个菜单项的背景颜色,以便每个菜单项都有其自己的颜色。随机与否我不在乎。我创建了一个正确连线的js文件。

我尝试了几个我找到的代码,但没有任何工作。现在我试图做到这一点,看看我是否可以改变颜色:

$(document).ready(function() { 

$("navmenu").hover(function(){ 
    $(this).css('background-color', '#eeeeee') 
}); 
}); 

不起作用。我对所有这些编程都很陌生,我非常感谢任何帮助。如果你可以回答假人,这将是非常好的,所以我可以理解。

+1

“在此处输入代码”?您可能要在下次发帖之前进行审核。现在你可以编辑它使其更清洁(工具栏中有一个帮助)。 –

+0

我很抱歉。我甚至搞不清这个问题。 – Anette

+0

别担心,有人为你修好;)你应该调用'$(“#navmenu”)',而不是'$(“navmenu”)',navmenu是一个ID! –

回答

4

用途:

$("#navmenu").hover(function(){ 

你错过了ID #选择。

0

您需要正确地使用#作为ID或a。一类:

$(document).ready(function() { 

$("#navmenu").hover(function(){ 
    $(this).css('background-color', '#eeeeee') 
}); 
}); 

一个初学者提示:如果你没有得到你所期望的结果,你可以验证功能是由在控制台日志消息随地扔这样叫:

$(document).ready(function() { 
    console.log("document ready!"); 
    $("#navmenu").hover(function(){ 
     console.log("hover activated"); 
     $(this).css('background-color', '#eeeeee') 
    }); 
}); 
0

你可以给这样的一个尝试,因为它会选择一个random colorhover和切换回#EEE背景上hover out事件:

jQuery的:

$(function() { 
    $("#navmenu a").hover(function() { 
     var newColor = Math.floor(Math.random() * 16777215).toString(16); 
     $(this).css('background-color', '#' + newColor); 
    }, function() { 
     $(this).css('background-color', '#EEE')   
    }); 
});​ 

工作实例:http://jsfiddle.net/Qc4R7/