div background color, to change onhover

css colors background hover
Ionuț G. Stan picture Ionuț G. Stan · Mar 24, 2009 · Viewed 633.5k times · Source

I'm trying to make a div's background color change on mouse over.

the div {background:white;}
the div a:hover{background:grey; width:100%;
display:block; text-decoration:none;}

only the link inside the div gets the background color.

what could I do to make the whole div get that background color?

thank you

EDIT :
how can I make the whole div to act as a link - when you click anywhere on that div, to take you to an address.

Answer

Henrik Paul picture Henrik Paul · Mar 24, 2009

The "a:hover" literally tells the browser to change the properties for the <a>-tag, when the mouse is hovered over it. What you perhaps meant was "the div:hover" instead, which would trigger when the div was chosen.

Just to make sure, if you want to change only one particular div, give it an id ("<div id='something'>") and use the CSS "#something:hover {...}" instead. If you want to edit a group of divs, make them into a class ("<div class='else'>") and use the CSS ".else {...}" in this case (note the period before the class' name!)

Related questions

Change background color every 30s (fade transition)

I would like someone to tell me what's the code for making a webpage background color (the background color of the whole page) to change (fade transition) every 30s to a given color variety. Is it simple? I guess css …

Read More
Different background color either side of page

I want to create a fixed-width layout where the background color on either side of the page is different, but with the background colours extending infinitely from either side of the page no matter how far you zoom out. For …

Read More
Change color of PNG image via CSS?

Given a transparent PNG displaying a simple shape in white, is it possible to somehow change the color of this through CSS? Some kind of overlay or what not?

Read More