PDA

View Full Version : Is it possible to make a div background change on rollover?


Black_Apalachi
11-11-2008, 01:44 PM
Here's my div:

div#nav_1 {width: 35px; height: 71px; margin-right: auto; float: left; background: url("images/nav_1_before.gif");}


And I want it to rollover with "images/nav_1_after.gif"

+rep for help :).
Source
11-11-2008, 01:45 PM
div#nav_1:hover { new properties for the rollover here }

so:


div#nav_1 {width: 35px; height: 71px; margin-right: auto; float: left; background: url("images/nav_1_before.gif");}
div#nav_1:hover { background: url("images/nav_1_after.gif"); }
Black_Apalachi
11-11-2008, 01:46 PM
div#nav_1:hover { new properties for the rollover here }

I think I tried something like that. Does that just go under the first div? Then do I need to add anything in the <body> tags?

Edit: yay it works thank you!! +rep :D
Iszak
11-11-2008, 03:10 PM
div#nav_1
{
width: 35px;
height: 71px;
margin-right: auto;
float: left;
background: url("images/nav_1_before.gif");
}

div#nav_1:hover
{
background: url("images/nav_1_after.gif");
}

In Sources example there is something you should pay attention to, by using the shorthand background property to change the background you reset all the other background properties you may have specified on the default element, such examples is background-position, background-repeat, background-color, etc. So in the following example I've pasted here;

http://pastebin.me/4919a01d20728

You can see one the first div when hovering over and using the shorthand background property the background goes from black to white on hover, this is because the default background color is white.

To avoid such results you should use background-image or redefine all the values in the shorthand background - I suggest using background image. If you look at the second one which is using background-image, you don't get this result, it keeps all it's properties.
Black_Apalachi
11-11-2008, 06:46 PM
In Sources example there is something you should pay attention to, by using the shorthand background property to change the background you reset all the other background properties you may have specified on the default element, such examples is background-position, background-repeat, background-color, etc. So in the following example I've pasted here;

http://pastebin.me/4919a01d20728

You can see one the first div when hovering over and using the shorthand background property the background goes from black to white on hover, this is because the default background color is white.

To avoid such results you should use background-image or redefine all the values in the shorthand background - I suggest using background image. If you look at the second one which is using background-image, you don't get this result, it keeps all it's properties.

Oh ok, thanks. +rep :).

If there aren't any other background properties, would this still be neccessary? The only properties are for the div itself:


div#nav_1 {width: 35px; height: 71px; margin-right: auto; float: left; background: url("images/nav_1_before.gif");}

....or is this the same thing as what you're saying?

Want to hide these adverts? Register an account for free!