使用 jquery 更改菜单的背景颜色答案

【问题标题】：Change Background-color of menue with jquery使用 jquery 更改菜单的背景颜色
【发布时间】：2012-12-08 08:00:46
【问题描述】：

我正在尝试使用 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')
 });
});

不起作用。我是所有这些编程的新手，我将非常感谢任何帮助。如果你能回答傻瓜就太好了，这样我就可以理解了。

【问题讨论】：

"在这里输入代码" ?您可能需要在下次发布之前进行审核。现在您可以进行编辑以使其更简洁（工具栏中有帮助）。
我很抱歉。我什至搞砸了这个问题。
别担心，有人为你修好了；）你应该打电话给$("#navmenu")，而不是$("navmenu")，navmenu 是一个id！
这是一个很好的编辑，汤姆，有很多修复要做:)
干杯 @dystroy - 我的强迫症战胜了我！

标签： java php jquery css

【解决方案1】：

用途：

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

您错过了 ID # 选择器。

【讨论】：

【解决方案2】：

您需要使用 # 作为 ID 或 .对于一个类：

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

【讨论】：

【解决方案3】：

您可以尝试这样的事情，因为它会在hover 上选择random color 并在hover out 事件上切换回#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/

【讨论】：