When the mouse pointer touches the header or any part of the body, I want the header background color to appear. Otherwise, I want the header background color to remain hidden.
<body>
<div id="wrapper">
<div id="header">
<a style="text-decoration:none" href="#" target="_blank">about.me</a>
<button class="button">Log In </button>
<button class="button">Create your page!</button>
</div><!-- #header -->
<div id="content">
<div id="image">
<center><img src="../../../../../wamp/www/check_php/IMG_9079.JPG"></center>
<div class="clear_both" /> </div>
<div class="sub">
<p align="center"><button class="button2">View my photos</button></p>
<div class="clear_both" /> </div>
<p align="left">This is the power of a common man</p>
</div>
</div><!-- #content -->
<div id="footer">
<p>Introduce yourself with a free, one-page website.
<button class="button1">Get Started </button></p>
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>