Home/ Questions/Q 7777781
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T18:13:48+00:00

I want to create a menu such as on redhotchilipeppers.com. When you hover a

  • 0

I want to create a menu such as on redhotchilipeppers.com. When you hover a link in the top right the background color of the whole page change. The original image is still in the back, it’s just the color that changes.

Below you can see how I tried to accomplish it. It’s fades way too slow and when I hover one link and then another it first fades to the first links bg color and then back to normal and then to the second links bg color. On redhotchilipeppers.com the bg colors fades right away.

Here’s the code I use right now:

<head>
<style>
body {
margin:0 auto;
top:0;
left:0;
height:100%;
width:100%;
background:url(images/bg.jpg);
}

#container {
width:100%;
height:100%;
display:block;
position:absolute;
top:0;
left:0;
opacity:0.4;
filter:alpha(opacity=40);
-moz-opacity: 0.4;
background-color:#fff;
z-index:-1;
}

.link {
position:inherit;
z-index:1;
float:right;
padding-top:100px;
}
</style>
</head>

<body>
<div id="container"></div>
<div class="link">
<a href="" id="linktomouseover"><img src="images/menu_start.png" alt="" /></a><a href="" id="linktomouseover2"><img src="images/menu_contactus.png" alt="" /></a>
</div>

<script> 
jQuery('#linktomouseover').hover(function() { 
jQuery('#container').animate({ backgroundColor: "#2154b9"}, 500);
}).mouseleave(function(){
jQuery('#container').animate({ backgroundColor: "#ffffff"}, 500); 
});

jQuery('#linktomouseover2').hover(function() { 
jQuery('#container').animate({ backgroundColor: "#ac1c27"}, 500);
}).mouseleave(function(){
jQuery('#container').animate({ backgroundColor: "#ffffff"}, 500); 
});
</script>
</body>

What am I doing wrong? Or is it a better way to solve this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Surprisingly, jQuery won’t animate background colors (without a plugin). The easiest way is to change classes with CSS and use CSS transitions instead, like so:

    $('#linktomouseover').hover(function() {
    $('#container').addClass('hover1')
}, function() {
    $('#container').removeClass('hover1')
});

#container {
    transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
}

    jsFiddle: http://jsfiddle.net/kkzLW/

    It’s more semantic anyway 🙂

    • 0