98

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.

Amith
  • 6,818
  • 6
  • 34
  • 45
Ionuț G. Stan
  • 176,118
  • 18
  • 189
  • 202

10 Answers10

121

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

Henrik Paul
  • 66,919
  • 31
  • 85
  • 96
47

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.
</div>
Lars Flieger
  • 2,421
  • 1
  • 12
  • 34
Real Red.
  • 4,991
  • 8
  • 32
  • 44
28

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

.div_hover {
  background-color: #FFFFFF;
}

.div_hover:hover {
  background-color: #000000;
}
<div class="div_hover"> Change div background color on hover</div>
Lars Flieger
  • 2,421
  • 1
  • 12
  • 34
Virsj Bhorania
  • 1
  • 2
  • 2
18

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:

<html>
<head>
    <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;
    }

    </style>

</head>
<body>

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

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

</body> </html>

Good luck!

11

html code:

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

css code:

    .nicecolor {
      color:red;
      width:200px;
      height:200px;
     }

    .nicecolor:hover {
      color:blue;
     }

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

user3689455
  • 21
  • 1
  • 2
  • 4
5

Set

display: block;

on a and give some height

Jamol
  • 2,281
  • 2
  • 28
  • 28
3

simply try "hover" property of CSS. eg:

<html>
<head>
    <style>
        div
        {
            height:100px;
            width:100px;
            border:2px solid red;
        }
        div:hover
        {
            background-color:yellow;
        }
    </style>
</head>
<body>
            <a href="#">
                      <div id="ab">
                                <p> hello there </p>
                      </div>
            </a>
</body>

i hope this will help

Tajveer Singh Nijjar
  • 495
  • 6
  • 18
1

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;
}
Nicki
  • 984
  • 8
  • 7
1

you could just contain the div in anchor tag like this:

a{
  text-decoration:none;
  color:#ffffff;
}
a div{
  width:100px;
  height:100px;
  background:#ff4500;
}
a div:hover{
  background:#0078d7;
}
<body>
<a href="http://example.com">
<div>
Hover me
</div>
</a>
</body>
trickymind
  • 557
  • 5
  • 21
0

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

Example:

.fbColor {
    background-color: #3b5998 !important;
    color: white;
}
T-Jayanth Dore
  • 77
  • 1
  • 6