Click to See Complete Forum and Search --> : How do I? change background colors with CSS?
maxotr
04-25-2006, 04:50 PM
:) How do I change the background color of different sections of a website? :eek:
I have an example here:
http://www.orangeafro.com/
I saw this site via the demo pages on CSSvault:
http://cssvault.com/cat_demos.php
What the site does is it changes the background color when you hover your mouse over a different section on the site. I'm guessing I have to use the "hover" function of CSS somehow.
Anybody familar with this? :confused:
Daniel T
04-25-2006, 05:32 PM
First off, in CSS, they're called 'pseudo-classes'. Internet Explorer only supports the :HOVER pseudo-class for anchors (A) so if it's something other than a link you need to change, you'll need to use JavaScript. Here's an example of hover being used to change the text color of a link to green on hover...<style type="text/css">
a:hover {
color: #090;
}
</style>If you want a hover effect on a DIV or any element other than A, put this JavaScript somewhere in the head of your page (or a seperate linked JS file):<script type="text/javascript">
window.onload = function() {
var els = document.getElementsByTagName('*');
for(var i = 0; i < els.length; i++) {
els[i].onmouseover = function() {
this.className += ' hover';
}
els[i].onmouseout = function() {
this.className = this.className.replace(/ ?hover/, '');
}
}
}
</script>Then you'd need to add a class as well as a pseudo-class:<style type="text/css">
#element:hover, #element.hover {
background: #090;
}
</style>
Gaurav Khanna
04-25-2006, 10:03 PM
make one div and put table iside that div and also give one div id
like homearticle
and make one style in css like below and call on the div layer of homearticle
#homearticle
{
background-color: #ffffff;
}
Make and another style in css like below and call on the
on text A href link call the precisbox style.
A.precisbox:hover
{
BACKGROUND-COLOR: #ddf; TEXT-DECORATION: none
}