私はCSSに非常に慣れていません。メニューのアイコンの下にホバー時にテキストを表示しようとしています。アイコンは問題ありません。そのうちの 1 つにカーソルを合わせると、テキスト (最初は非表示) が正しく表示されますが、他のすべてのアイコンが下に移動します。誰かが私を助けてくれるのだろうか。
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;}
私はたくさん検索しましたが、答えが見つかりませんでした。ありがとう