在悬停在带有图标字体的菜单上显示隐藏文本

时间:2013-06-22 00:48:17

标签: css fonts icons

我是CSS的新手。我正试图在菜单上的图标下悬停显示文字。 图标还可以,当我将其中一个悬停时,文本(最初隐藏)会正确显示,但所有其他图标都会向下移动。 我想知道是否有人可以帮助我。

HTML:

<div class="hmenu" style="top: 1580px;">
<ul class="hmenu">
<li><a class="hmenu-icon icon-heart-empty" href="#"><p class="texto">what I love</p></a></li>
<li><a class="hmenu-icon icon-map-2" href="#"><p class="texto">my skills</p></a></li>
<li><a class="hmenu-icon icon-monitor" href="#"><p class="texto">my tools</p></a></li>
</ul>
</div>

CSS:

.hmenu{position: absolute;list-style:none;
top: 270px;
left: 50%;
margin-left: -580px;
text-align:center;
font-family: 'lobster', 'Arial';
font-size: 16px;
width:1120px; 
}
.hmenu li{display:inline; padding: 0px 0px;}
.hmenu a{text-decoration: none; display:inline-block;color: #29ab99;}
.texto {display:none;}
.hmenu a:hover {text-decoration: none; display:inline-block; color: #fd5200;}
.hmenu a:hover .texto {display:block;}

我经常搜索,找不到答案。 感谢

0 个答案:

没有答案