title: A:hover activates when it's not supposed to
body: <p>I have this kind of complex set up with divs and links. Anyway, the logo in the top of left of my page is supposed to change when you hover over it, and it does. However, it also changes if your mouse goes anywhere in the top section of the page (outlined in red on the image)</p>
  
  <p>Also when I click on the logo, the link doesn't work. I think it may have to do with the way I have the divs set up, but i'm not sure.</p>
  
  <p>I'm still kind of new at all of this, and I'm a little overwhelmed at figuring out this issue. If you can help, I would appreciate it.</p>
  
  <p>Below is my html, css, and an image to help show you what I'm talking about.</p>
  
  <p><img src="https://i.stack.imgur.com/UdAf3.jpg" alt="enter image description here"></p>
  
  <p>This is my html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Playing with backgrounds&lt;/title&gt;
  &lt;link href="styles.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="wrapper"&gt;
  
  &lt;div id="topheader"&gt; 
  
  &lt;a href="index.html"&gt;
  &lt;div id="logo"&gt;
  &lt;div id="navigation"&gt;
  &lt;a href="index.html"&gt;NEWS&lt;/a&gt;&lt;br /&gt;
  &lt;a href="index.html"&gt;ABOUT&lt;/a&gt;&lt;br /&gt;
  &lt;a href="index.html"&gt;VOLUNTEER&lt;/a&gt;&lt;br /&gt;
  &lt;a href="index.html"&gt;DONATE&lt;/a&gt;&lt;br /&gt;
  &lt;a href="index.html"&gt;CONTACT US&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  
  
  &lt;div id="welcome"&gt;
  &lt;h1&gt;Welcome&lt;/h1&gt;
  &lt;h2&gt;
  To 
  &lt;span class="gold"&gt; Promise Land Partners&lt;/span&gt;&lt;/h2&gt;
  
  &lt;/div&gt;
  
  
  &lt;div id="bottom_bar"&gt;
  &lt;p&gt;COPYRIGHT DAVIDMORRIS © 2014 | &lt;a href="index.html"&gt;NEWSLETTER&lt;/a&gt; | &lt;a href="index.html"&gt;FACEBOOK&lt;/a&gt;
  &lt;span class="right"&gt;DESIGN: HANGING OUT&lt;/span&gt;
  &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my CSS</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  body {
      background-image: url(img/dot.png), url(img/background.jpg);
      background-repeat: repeat, no-repeat;
      background-position: top left, center center fixed;
      background-size: auto, cover;;
      margin: 0px;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  }
  
  #topheader {
      height: 135px;
      width: 100%;
      overflow: hidden;
      position: relative;
      background-image: url(img/headerbar.png);
      background-repeat: repeat-x;
  }
  
  #logo {
      background-image:url(img/PLP.png);
      background-repeat: no-repeat;
      background-position: top left;
      height: 100px;
      width: 100%;
      margin: 0;
      padding: 0;
  }
  
  #logo:hover, #logo:active {
      background-image:url(img/PLP_pushed.png);
  }
  
  #navigation {
      background-image: none;
      background-position: top left;
      padding-left: 180px;
  }
  
  #bottom_bar {
      background-image:url(img/bottom_bar.jpg);
      position: fixed;
      bottom: 0;
      height: 27px;
      width: 100%;
      color: white;
  }
  
  #bottom_bar p {
      text-align: left;
      padding: 4px;
      margin: 0;
  }
  
  .right {
      float:right;
  }
  
  #welcome {
      background-image: url(img/welcomepanel.png);
      background-repeat: no-repeat;
      position: relative;
      left: 0;
      top: 70px;
      height: 261px;
      width: 100%;
      padding-top: 10px;
      padding_left: 10px;
      margin: 0;
  }
  
  h1 {
      color:white;
      padding-left: 90px;
      font-size: 6em;
      margin: 0;
      margin-top: 8px;
  }
  
  h2 {
      color: white;
      font-size: 4em;
      padding-left: 20px;
      margin: 0;
      line-height: .65em;
  }
  
  .gold {
      color: #ee9f00;
      font-size: .75em;
      margin: 0;
  }
  
  a {
      text-decoration: none;
      color: white;
  }
  
  a:visited {
      color: #c88601;
  }
  
  a:focus {
      color: #ee9f00;
  }
  
  a:hover {
      color: #ee9f00;
  }
  
  a:active {
      color: c88601;
  }
  
  #navigation a {
      text-decoration: none;
      color: white;
  }
  
  #navigation a:visited {
      color: white;
  }
  
  #navigation a:focus {
      background-color: #ee9f00;
  }
  
  #navigation a:hover {
      background-color: #ee9f00;
  }
  
  #navigation a:active {
      background-color: #ee9f00;
  }
  </code></pre>