div background color, to change onhover
-
21-08-2019 - |
Question
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.
Solution
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!)
OTHER TIPS
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>
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:
<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!
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.
Set
display: block;
on a and give some height
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;
}
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;
}