我的导航栏中有这样的图标 ( 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;}
我将不胜感激,因为我找不到任何用文本替换悬停的教程。谢谢。
最佳答案
给定这个 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;
}
关于CSS Navigation : When hovering over icon, 图标应替换为文本链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16727180/