Question

我有一个导航菜单，我隐藏了十个链接中的三个，但是当鼠标悬停在链接所在的位置时，仍会显示鼠标悬停效果。我怎么摆脱这个？

<!--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

您似乎隐藏了a标记的内容，而不是a标记本身：

.header_nav a span.search_link {display:none}

你需要隐藏整个标签，否则这仍然会在DOM中显示，可能还有一个类：

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

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

css隐藏链接鼠标悬停

1 个答案: