使用jQuery更改菜单的背景颜色

Question

我想使用Zenphoto建立一个照片库。它们使用php语言，可以像这样添加自定义菜单：

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

我在样式表中改变了整个东西的外观，看起来像这样：

#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')
 });
});

无法工作。我对所有这些编程都是新手，我非常感谢任何帮助。如果您能够用白痴式的语言回答，那就太好了，这样我就可以理解。

- Anette

---

"输入代码在这里"？下次发布前您可能需要进行审核。现在您可以编辑以使其更清晰（工具栏中有帮助）。 - Denys Séguret

非常抱歉，我连提问都搞砸了。 - Anette

别担心，有人为你修复了 ;) 你应该调用 $("#navmenu")，而不是 $("navmenu")，因为 navmenu 是一个 id！ - Cyril N.

这是一个很好的编辑，汤姆，有很多修复工作要做 :) - Denys Séguret

谢谢@dystroy - 我的强迫症占了上风！ - Tom Walters

Answer 1

使用：

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

您错过了ID #选择器。

- Tom Walters

Answer 2

你需要使用 # 表示 ID 或 . 表示类来正确地定位 div：

$(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')
    });
});

- Tapefreak

Answer 3

你可以尝试以下代码，它会在鼠标悬停时随机选择一种颜色，并在鼠标移开时切换回 #EEE 背景色：

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/

- PhearOfRayne