Menu for dynamically changing colors

Question

I have a menu on my page that has a set of submenus that will be displayed on h-over.

I planned for the menu to change color dynamically every time I hover over it.

I like to add a set of colors.

for instance

#cccccc; #999999; #474747; #4c4c4c; 

These colors should change dynamically when I'm in, I tried to use some jquery for example:

 $('menu').css('backgroundImage', 'url(something.gif)'); 

but my plan is to do this only with css. Any idea for this?

Answer 1

 $('menu').css('backgroundImage', 'url(something.gif)'); 

When using an image, try using

 $('menu').css('background', '#cccccc'); $('menu:hover").css('background', '#999999', '#474747', '#4c4c4c'); 

Answer 2

You can use this

$ ('navigation'). css ('background', '#cccccc');

$ ('. Navigation: soar ") CSS (' background ',' # 999999 ',' # 474747 ', # 4c4c4c

Answer 3

 #idOmMenu{ background-color:#474747; } #idOmMenu:hover{ background-color:#cccccc; } 

This will be a css only solution.

Answer 4

 i=0; function hover() { var color = new Array("cccccc","999999","474747","4c4c4c"); $('#IDofMenu').css('backgroundColor',color[i]); i==3?i=0:i++; } 

Answer 5

You can use javascript, let's say your menu looks like this:

 <ul class="nav"> <li onmouseover="this.parentNode.className = 'hoveredpurple';" onmouseout="this.parentNode.className = '';"><span>item1</span> </li> <li onmouseover="this.parentNode.className = 'hoveredred';" onmouseout="this.parentNode.className = '';"><span>item2</span> </li> </ul> 

then if you want the whole menu to change color when hovering over item1 or item 2, you use some css as follows: (this way you can still style it from your css file and should not return from css to javascript)

 .hoveredred{ background: red; } .hoveredpurple{ background: purple; }​ 

here jsFiddle: http://jsfiddle.net/XCTcN/1/

in css4 this is possible in pure css where you can use the parent selector: http://www.red-team-design.com/meet-the-css4-selectors

Answer 6

You can also throw some css3 kindness if you like.

 .menu { background: pink; -webkit-transition: background 1s; -moz-transition : background 1s; -o-transition : background 1s; transition : background 1s; } .menu:hover { background: yellow; -webkit-transition: background 1s; -moz-transition : background 1s; -o-transition : background 1s; transition : background 1s; } .menu:active { background: green; -webkit-transition: background 1s; -moz-transition : background 1s; -o-transition : background 1s; transition : background 1s; }