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

Originally Posted by Source

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

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

Originally Posted by Iszak

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?

Thread: Is it possible to make a div background change on rollover?

Thread Tools

Is it possible to make a div background change on rollover?

Posting Permissions