[英]Change Background-color of menue with jquery
I am trying to build a photo gallery with Zenphoto. 我正在尝试用Zenphoto建立一个照片库。 They use php and one can add a custom menue like this: 他们使用PHP,可以添加这样的自定义菜单:
<div id="navmenu">
<?php printCustomMenu('main_menue'); ?>
</div>
I changed the appearance of the whole thing in the sylesheet, which looks like this: 我改变了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;
}
Now I want to change the background-color of the individual menu items, so that every menu item has its own color. 现在我想更改各个菜单项的背景颜色,以便每个菜单项都有自己的颜色。 Random or not I don't care. 随机与否我不在乎。 I created a js file that is wired correctly. 我创建了一个正确连接的js文件。
I have tried several bits of code I found, but nothing works. 我已经尝试了几个代码,但没有任何作用。 Now I tried to do this to see if I can change the color at all: 现在我试着这样做,看看我是否可以改变颜色:
$(document).ready(function() {
$("navmenu").hover(function(){
$(this).css('background-color', '#eeeeee')
});
});
Does not work. 不行。 I am new to all this programming and I would greatly appreciate any help. 我是所有这些编程的新手,我将非常感谢任何帮助。 It would be super nice if you could answer for dummies, so that I can understand. 如果你能回答傻瓜,那将是非常好的,这样我才能理解。
Use: 使用:
$("#navmenu").hover(function(){
You missed the ID #
selector. 你错过了ID #
选择器。
You need to properly address the div using # for an ID or a . 您需要使用#为ID或a正确地处理div。 for a class: 对于一个类:
$(document).ready(function() {
$("#navmenu").hover(function(){
$(this).css('background-color', '#eeeeee')
});
});
A tip for beginners: if you're not getting the result you expect, you can verify that the function is being called by throwing in a console log message anywhere like this: 初学者的提示:如果你没有得到你期望的结果,你可以通过在这样的地方抛出控制台日志消息来验证是否正在调用该函数:
$(document).ready(function() {
console.log("document ready!");
$("#navmenu").hover(function(){
console.log("hover activated");
$(this).css('background-color', '#eeeeee')
});
});
You could give something like this a try as it will pick a random color
on hover
and switch back to the #EEE
background on the hover out
event: 你可以尝试这样的东西,因为它会在hover
时选择一个random color
并切换回hover out
事件的#EEE
背景:
jQuery: 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')
});
});
Working Example: http://jsfiddle.net/Qc4R7/ 工作示例: http : //jsfiddle.net/Qc4R7/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.