How to change background colour of entire div on hover? - html

Question

­I'm making a website and want to have a link inside a div that changes colour when hovered over, however I've come across a problem. Pre hover, I want a border around the div the same colour as the text in the link inside. The background colour should be white. Then, upon hover, I want the background colour to change to the colour of the text and border, and the text to become white. Because I have padding inbetween the link and div border, it doesn't quite work as intended. Here is the source html/css:
HTML:
<div id="home">
HOME
</div>
CSS:
#home {
border: 4px solid #00a651;
font-size: 30px;
padding: 10px 20px 10px 20px;
margin: 20px 100px 20px 100px;
display: inline-block;
}
#home a {
background: #ffffff;
color: #00a651;
text-align: center;
}
#home a:hover {
background: #00a651;
color: #ffffff;
}
When anywhere within the div is hovered over other than the link, nothing happens, and when you hover over the link the padding remains white. What do I need to do to make it so the colour change happens when anywhere on the div is hovered over, and the whole divs colour changes? Thanks, Brandon :)

Answer 1

#home {
font-size: 30px;
margin: 20px 100px 20px 100px;
display: inline-block;
}
#home a {background: #ffffff;
border: 4px solid #00a651;
padding: 10px 20px 10px 20px;
color: #00a651;
text-align: center;
}
#home a:hover {background: #00a651;
color: #ffffff;
}
<div id="home">
HOME
</div>

Answer 2

You need to add the hover event to the div and the anchor:
#home {
border: 4px solid #00a651;
font-size: 30px;
padding: 10px 20px 10px 20px;
margin: 20px 100px 20px 100px;
display: inline-block;
}
#home a {
background: #ffffff;
color: #00a651;
text-align: center;
}
#home:hover {
background: #00a651;
color: #ffffff;
}
#home:hover a {
background: #00a651;
color: #ffffff;
}
<div id="home">
HOME
</div>

Answer 3

I recommend using the jQuery library, if you know how to use it:
Link your jQuery download to your main html file or use a CDN.
In your JavaScript file add a hover event on your link and use the css effect to to change the color of the div once you hover over the link. Then add another css effect so the link changes color as the div does. Like this:
$(document).ready(function(){
$('a').hover(function(){
$('#home').css("background-color","#00a651");
$('a').css("color", "chooseacolor");
});
});
I am not entirely sure what you are asking of, so this is the best answer I can give!

Answer 4

I don't think using :hover on DIV elements is a good idea. As I know, this practice is not fully supported on all browsers of all versions. Why not use some JS?
But, anyway, if you need all area (including padding) in the DIV become clickable - you should rather make it "display:block" in CSS.
$(document).ready(function() {
$('#home').hover(function() {
$(this).css('background-color', '#00a651').find('a').css({
backgroundColor: '#00a651',
color: '#FFFFFF'});
}, function() {
$(this).css('background-color', '#FFFFFF').find('a').css({
backgroundColor: '#ffffff',
color: '#00a651'});
});
});
#home {
border: 4px solid #00a651;
font-size: 30px;
padding: 10px 20px 10px 20px;
margin: 20px 100px 20px 100px;
display: inline-block;
}
#home a {background: #ffffff;
color: #00a651;
text-align: center;
}
/* There is no need to use :hover anymore if using a script */
<!-- this goes to the HEAD section if not arleady there -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="home">
HOME
</div>