0

我的导航栏中有这样的图标（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;}

我将不胜感激，因为我找不到任何用文本进行悬停替换的教程。谢谢。

4

3 回答 3

1

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

于 2013-05-24T03:23:32.040 回答
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's 的背景图像，你可以有这个 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;
}
于 2013-05-24T03:23:49.570 回答
1

尝试将您的 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;}
于 2013-05-24T03:34:27.737 回答