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.
This question is related to
css
colors
background
hover
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; }
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>
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.
you could just contain the div in anchor tag like this:
a{_x000D_
text-decoration:none;_x000D_
color:#ffffff;_x000D_
}_x000D_
a div{_x000D_
width:100px;_x000D_
height:100px;_x000D_
background:#ff4500;_x000D_
}_x000D_
a div:hover{_x000D_
background:#0078d7;_x000D_
}<body>_x000D_
<a href="http://example.com">_x000D_
<div>_x000D_
Hover me_x000D_
</div>_x000D_
</a>_x000D_
</body>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!
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
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;
}
Set
display: block;
on a and give some height
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;
}
Source: Stackoverflow.com