views:

5916

answers:

4

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

LATER 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.

+3  A: 

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
thank you, it worked :)
Ionuț G. Stan
+1  A: 

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>
Chandan .
+2  A: 

Set

display: block;

on a and give some height

presario
+1  A: 

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"&gt;Stack Overflow</a>
 </div>

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

</body> </html>

Good luck!

thank you :)it worked, I'm so happy
Ionuț G. Stan