css - css hiding link mouseovers

Question

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?

<!--example link-->
<a HREF="#"><span CLASS="store_link">Store Links</span></a>

//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;
}

Answer 1

It seems you are hiding the content of the a tag and not the a tag itself:

.header_nav a span.search_link {display:none}

You would need to hide the entire tag otherwise this would still appear visible in the DOM, possibly with a class:

<a HREF="#" class="hidden"><span CLASS="store_link">Store Links</span></a>

// CSS  
.header_nav a.hidden {display:none}