CSS 导航：当鼠标悬停在图标上时，图标应替换为文本链接

Posted 2023-05-08

【中文标题】CSS 导航：当鼠标悬停在图标上时，图标应替换为文本链接

【英文标题】：CSS Navigation: When hovering over icon, icon should be replaced with text link

【发布时间】：2013-05-19 14:17:06

【问题描述】：

我的导航栏中有这样的图标 (http://d.pr/i/NP2T)。当我将鼠标悬停在一个图标上时，我希望该图标消失并显示该列表项的链接文本 (http://d.pr/i/Vd7i)。

这是我的 html：

<div id="npnav">
  <ul>
    <li class="current music"><a href="#">Music</a></li>
    <li class="art"><a href="#">Art</a></li>
    <li class="goods"><a href="#">Goods</a>/li>
    <li class="blog"><a href="#">Blog</a></li>
  </ul>
</div>

这是我的 CSS：

#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;

如果能提供任何帮助，我将不胜感激，因为我找不到任何使用文本进行悬停替换的教程。谢谢。

【参考方案1】：

鉴于此 HTML：

<div id="npnav">
  <ul>
    <li class="current music"><a href="#">Music</a></li>
    <li class="art"><a href="#">Art</a></li>
    <li class="goods"><a href="#">Goods</a>/li>
    <li class="blog"><a href="#">Blog</a></li>
  </ul>
</div>

假设图标是li 的背景图片，你可以有这个CSS：

.current.music  background-image: url(someImageUrl); 
.art  background-image: url(someImageUrl); 
/* etc */

#npnav li a 
    display: none;


#npnav li:hover 
    background-image: none;


#npnav li:hover a 
    display: inline;

【讨论】：

谢谢先生。我不得不将背景图像更改为不同类的背景，但很容易修复。

【参考方案2】：

一种选择是在每个<a> 中添加一个额外的跨度，为其提供所需的背景图像，并将其绝对定位在链接文本上（链接设置为位置：相对）。悬停时，将 span 的位置设置为向左移动以将其移出屏幕。

【参考方案3】：

尝试将您的 CSS 修改为这样的内容 -

#npnav ul 
    list-style:none;
    padding-top:15px;


#npnav li 
    display:inline-block;
    padding:10px;
    text-decoration:none;
    font-weight:bold;
    width:60px;
    height:60px;


#npnav li a 
    display:block;/*Ensure link covers the full space of the li */
    text-indent: -9000px; /*hide text away to the left */
    line-height:60px;


#npnav li a:hover 
    text-indent: 0;/* Display the text on mouse over */



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;