title: CSS: Change Background Color on Hover
body: <p>I've searched other questions, and the solutions I've found don't work.</p>
  
  <p>Here's the deets: Webpage has a .side_nav .  There are 4  elements to that .  Each  has a small img, an h2, and a p.</p>
  
  <p>I'd like for the links to have a lighter color when hovered.  I feel as if I'm missing something small...</p>
  
  <p>I'm using DW:CC, and interestingly enough, it does not show the normal background in the  in "Live" view.  It does, however, show the :hover action in "Live" view, just not in any of the browsers I've tried.  </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;nav class="fluid side_nav"&gt;
      &lt;div&gt; &lt;a href="#"&gt; &lt;img src="images/images.jpg" alt=""/&gt;
          &lt;h2&gt;Estimates&lt;/h2&gt;
          &lt;p&gt;Click here for an estimate&lt;/p&gt;
          &lt;/a&gt;&lt;/div&gt;
      &lt;div&gt; &lt;a href="#"&gt; &lt;img src="images/images.jpg" alt=""/&gt;
          &lt;h2&gt;Repairs&lt;/h2&gt;
          &lt;p&gt;Click here for an estimate&lt;/p&gt;
      &lt;/a&gt;&lt;/div&gt;
      &lt;div&gt; &lt;a href="#"&gt; &lt;img src="images/images.jpg" alt=""/&gt;
          &lt;h2&gt;Maintenance&lt;/h2&gt;
          &lt;p&gt;Click here for an estimate&lt;/p&gt;
      &lt;/a&gt;&lt;/div&gt;
      &lt;div&gt; &lt;a href="#"&gt; &lt;img src="images/images.jpg" alt=""/&gt;
          &lt;h2&gt;Specials&lt;/h2&gt;
          &lt;p&gt;Click here for an estimate&lt;/p&gt;
      &lt;/a&gt;&lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Then, the CSS:</p>
  
  <pre><code>.side_nav {
      clear: both;
      margin-top: 10px;
      margin-bottom: 10px;
  }
  .side_nav img {
      height: 35px;
      padding-right: 15px;
      float: left;
  }
  .side_nav a {
      display: block;
      border: 1px solid #151515;
      margin-bottom: 8px;
      border-radius: 8px;
      padding-top: 8px;
      padding-right: 8px;
      padding-bottom: 8px;
      padding-left: 8px;
      -webkit-box-shadow: 4px 2px 6px #8E8E8E;
      box-shadow: 4px 2px 6px #8E8E8E;
      background-image: -webkit-linear-gradient(0deg,rgba(40,121,216,1.00) 0%,rgba(25,77,138,1.00) 99.48%);
      background-image: -moz-linear-gradient(0deg,rgba(40,121,216,1.00) 0%,rgba(25,77,138,1.00) 99.48%);
      background-image: -o-linear-gradient(0deg,rgba(40,121,216,1.00) 0%,rgba(25,77,138,1.00) 99.48%);
      background-image: linear-gradient(90deg,rgba(40,121,216,1.00) 0%,rgba(25,77,138,1.00) 99.48%);
      color: #FFFFFF;
  }
  .side_nav a:hover {
      background-color: #3374C2;
  }
  </code></pre>
  
  <p>Any tips?</p>