title: css hiding link mouseovers
body: <p>I have a navigation menu where I hide three of the ten links, however the mouseover effect still displays when I mouseover the spot where the links were.  How do I get rid of this?</p>
  
  <pre><code>&lt;!--example link--&gt;
  &lt;a HREF="#"&gt;&lt;span CLASS="store_link"&gt;Store Links&lt;/span&gt;&lt;/a&gt;
  
  //mouseover effects for all links
  .header_nav a:hover {
      padding: 8px 8px;
      border-top: 4px solid #CC0078;
      border-bottom: 4px solid #CC0078;
  }
  
  //hiding the three links
  .header_nav a span.search_link,
  .header_nav a span.cat_link,
  .header_nav a span.store_link {
      display: none;
  }
  
  //my attempt at hiding mouseover effects which does not work
  .header_nav a:hover span.icon-search,
  .header_nav a:hover span.cat_link,
  .header_nav a:hover span.store_link {
      border-top: none;
      border-bottom: none;
  }
  </code></pre>