div background color, to change onhover

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.


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!)

Using Javascript

   <div id="mydiv" style="width:200px;background:white" onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';">
    Jack and Jill went up the hill 
    To fetch a pail of water. 
    Jack fell down and broke his crown, 
    And Jill came tumbling after. 

There is no need to put anchor. To change style of div on hover then Change background color of div on hover.

<div class="div_hover"> Change div background color on hover</div>

In .css page

.div_hover { background-color: #FFFFFF; }

.div_hover:hover { background-color: #000000; }

To make the whole div act as a link, set the anchor tag as:

display: block

And set your height of the anchor tag to 100%. Then set a fixed height to your div tag. Then style your anchor tag like usual.

For example:

    <title>DIV Link</title>

    <style type="text/css">
    .link-container {
        border: 1px solid;
        width: 50%;
        height: 20px;

    .link-container a {
        display: block;
        background: #c8c8c8;
        height: 100%;
        text-align: center;

    .link-container a:hover {
        background: #f8f8f8;



    <div class="link-container">
        <a href="http://www.stackoverflow.com">Stack Overflow</a>

    <div class="link-container">
        <a href="http://www.stackoverflow.com">Stack Overflow</a>

</body> </html>

Good luck!

html code:

    <!DOCTYPE html>
    <head><title>this is your web page</title></head>
    <div class = "nicecolor"></div>

css code:

    .nicecolor {

    .nicecolor:hover {

and thats how youll change your div from red to blue by hovering over it.


display: block;

on a and give some height

simply try "hover" property of CSS. eg:

            border:2px solid red;
            <a href="#">
                      <div id="ab">
                                <p> hello there </p>

i hope this will help

You can just put the anchor around the div.

<a class="big-link"><div>this is a div</div></a>

and then

a.big-link {
background-color: 888;
a.big-link:hover {
 background-color: f88;

Just make the property !important in your css file so that background color doesnot change on mouse over.This worked for me.


.fbColor {
    background-color: #3b5998 !important;
    color: white;

Need Your Help

Delaunay triangularization of Polyhedron (Python)

python matplotlib scipy delaunay polyhedra

I'm trying to get the Delaunay Triangulation of a polyhedron in python so that I can calculate the centroid. I see that there is a Delaunay function in scipy.spatial and that it works in n-dimensio...

Create multiple independent canvas drawing boards

javascript canvas mouseevent draw whiteboard

If I want to create more than one canvas drawing board in a page,