title: I want a image inside a list and a anchor tag to change on hover with css
body: <p>I am trying to put a background to a empty anchor tag, but nothing will show up unless i place text there. What is the best approach to having a image in a list item and change it to another image on hover with css.</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a class="nav1" href="http://localhost:8888/fiftyfity/?page_id=2"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>   ul li a.nav1{
      background-image: url("../images/nav1.gif");
      width:161px;
      height: 49px;
  }
  ul li a.nav1:hover{
      background-image: url("../images/navB1.gif");
      width:100px;
      height: 20px;
  }
  </code></pre>