title: CSS Navigation: When hovering over icon, icon should be replaced with text link
body: <p>I have icons like these in my navbar (<a href="http://d.pr/i/NP2T" rel="nofollow">http://d.pr/i/NP2T</a>). When I hover over one icon, I want the icon to disappear and have the link text for that list item to appear (<a href="http://d.pr/i/Vd7i" rel="nofollow">http://d.pr/i/Vd7i</a>).</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;div id="npnav"&gt;
    &lt;ul&gt;
      &lt;li class="current music"&gt;&lt;a href="#"&gt;Music&lt;/a&gt;&lt;/li&gt;
      &lt;li class="art"&gt;&lt;a href="#"&gt;Art&lt;/a&gt;&lt;/li&gt;
      &lt;li class="goods"&gt;&lt;a href="#"&gt;Goods&lt;/a&gt;/li&gt;
      &lt;li class="blog"&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my CSS:</p>
  
  <pre><code>#npnav ul {
  list-style:none;
  padding-top:15px;
  }
  
  #npnav li {
  display:inline-block;
  padding:10px;
  text-decoration:none;
  font-weight:bold;
  max-width:60px;
  max-height:60px;
  }
  
  #npnav li a {
  visibility: hidden;
  }
  
  #npnav li a:hover {
  visibility: visible;
  }
  
  
  li.music {background:url('/images/headphone_icon.png') center center no-repeat; }
  li.music:hover {background:none;}
  li.art {background:url(img/nav-aboutHover.gif) center center no-repeat;}
  li.art:hover {background:none;}
  li.goods {background:url('/images/anchor_icon.png') center center no-repeat;}
  li.goods:hover {background:none;}
  li.blog:hover {background:url('/images/blog_icon.png') center center no-repeat;}
  li.blog:hover {background:none;}
  </code></pre>
  
  <p>I'd appreciate any help with this, as I couldn't find any tutorials doing the hover replacement with the  text. Thanks.</p>