title: Anchor tag change image on hover and active
body: <p>I am trying to change the anchor tag image on hover and active, but it is not working.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div&gt;
      &lt;div id="accordion"&gt;
          &lt;h3&gt;&lt;a href="" runat="server" id="aCollection"&gt;test&lt;/a&gt;&lt;/h3&gt;
          &lt;div class="acsection" runat="server" id="divCollection"&gt;
              &lt;ul&gt;
                  &lt;li runat="server" id="collectionmenu1"&gt;&lt;a href="1.aspx"&gt;page-1&lt;/a&gt;&lt;/li&gt;
                  &lt;li runat="server" id="collectionmenu2"&gt;&lt;a href="2.aspx"&gt;page-2&lt;/a&gt;&lt;/li&gt;
                  &lt;li runat="server" id="collectionmenu3"&gt;&lt;a href="3.aspx"&gt;page-3&lt;/a&gt;&lt;/li&gt;
                  &lt;li runat="server" id="collectionmenu4"&gt;&lt;a href="4.aspx"&gt;page-4&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;h3&gt;&lt;a href="5.aspx"&gt;Group&lt;/a&gt;&lt;/h3&gt;
      &lt;h3&gt;&lt;a href="6.aspx"&gt;Send&lt;/a&gt;&lt;/h3&gt;
      &lt;h3&gt;&lt;a href="7.aspx"&gt;contact&lt;/a&gt;&lt;/h3&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#aCollection
  {
      background-image: url(images/collection.jpg);
  }
  
  #aCollection:hover
  {
      background-image: url(images/collection_hover.jpg);
  }
  
  #aCollection:active
  {
      background-image: url(images/collection_active.jpg);
  }
  </code></pre>