CODEWITHSUNDEEP
javaphpjquerycss
Anette
Anette

Reputation: 51

Change Background-color of menue with jquery

I am trying to build a photo gallery with Zenphoto. They use php and one can add a custom menue like this:

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

I changed the appearance of the whole thing in the sylesheet, which looks like this:

#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.

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.

Upvotes: 5

Views: 197

Answers (3)

PhearOfRayne
PhearOfRayne

Reputation: 5050

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:

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/

Upvotes: 0

Tapefreak
Tapefreak

Reputation: 982

You need to properly address the div using # for an ID or a . 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')
    });
});

Upvotes: 0

Tom Walters
Tom Walters

Reputation: 15616

Use:

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

You missed the ID # selector.

Upvotes: 4

Related Questions