I'm working on creating a div that acts as a link to another page. My goal is to have the entire background color of the div change to blue when someone hovers over it. I want to achieve this effect using CSS only, as I am not sure if javascript will work for everyone.
Issue at Hand: The code I have written below successfully creates the link, but the background color of the div does not change when hovered over. What mistake do you think I am making and how can I correct it to ensure that the div changes its background color on hover?
I suspect that I may need to place the link (a element) inside the div instead of outside, but I struggle to make the link stretch to fill the entire space of the div that way.
<html>
<head>
<style type="text/css">
<!--
body { background-color: RGB(218,238,248); }
#rentalAnnc { margin-top: 5%; border-color: #99CCFF; padding-left: 10px; padding-right: 10px;
border-width:thin; border-style:solid; border-right-width:thick;
border-bottom-width:thick; background-color: #FFFFFF; width: 300px; }
/* Using pure CSS I am trying to make the background color of the div renatalAnnc have a blue background when we hover over it*/
.sidebarLink { color: #000000; text-decoration: none; }
.sidebarLink a:hover { background-color: blue; }
/* The following on works in Firefox not IE! :( #rentalAnnc:hover { background-color: blue; } */
-->
</style>
</head>
<body>
<a class="sidebarLink" href="facilitiesForHire.html">
<div id="rentalAnnc">
<p>We have a range of Education Facilities available for lease & hire</p>
</div>
</a>
</body>
</html>