CODEWITHSUNDEEP
htmlcssmenucolorshover
Karthikeyan.A
Karthikeyan.A

Reputation: 108

menu to change colors dynamically

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

i planned to make the menu to change color dynamically each time i hover.

I like to add a set of colors.

For example

#cccccc;

#999999;

#474747;

#4c4c4c;

These colors must be dynamically changed when i hover I tried to some jquery like this:

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

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

Upvotes: 5

Views: 537

Answers (6)

Maxim VA
Maxim VA

Reputation: 408

You could use some 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 entire menu change color on hover of item1 or item 2 you use some css like this: (this way you can still style it from your css file and dont have to go back 'n forth from css to the javascript)

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

here's a jsFiddle: http://jsfiddle.net/XCTcN/1/

in css4 this will possible in pure css where you will be able to use a parent selector: http://www.red-team-design.com/meet-the-css4-selectors

Upvotes: 1

Vivek Dragon
Vivek Dragon

Reputation: 2248

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

inspite of using image try to use

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


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

Upvotes: 9

Robert Hoffmann
Robert Hoffmann

Reputation: 2416

You could also toss in some css3 goodness if ya 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;
}

Upvotes: 0

SandhanaMurali
SandhanaMurali

Reputation: 149

You could use this

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

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

Upvotes: 4

Ivan Kuzev
Ivan Kuzev

Reputation: 41

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

This shoud be a "css only" solution.

Upvotes: 3

Man Programmer
Man Programmer

Reputation: 5356

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

Upvotes: 1

Related Questions