我目前正在制作一个带有图标的圆形菜单，当您将鼠标悬停在某个区域上时会弹出图标。
这部分效果很好，但是，当我将鼠标悬停在上述图标之一上时尝试在该区域的中心显示文本时出现问题。文本正在使用图标旋转和翻译。
这是（相关部分）代码：
HTML
<div class="holder">
<ul class="icons">
<li class="icon1"><a href="https://www.google.com"><img src="./icons/block32.png" alt=""></a>
<div class='tooltip'><span>This is a dummy text</span></div>
</li>
</ul>
CSS
.holder {
position:relative;
margin:auto;
float: left;
}
.holder a {
position:absolute;
}
ul.icons {margin:100px; list-style:none; width:0px; height:50px; position:absolute;
left: 8px;
border:160px solid transparent;
-webkit-border-radius: 200px;
border-radius: 200px;
}
.tooltip {
display: none;
}
ul.icons > li:hover .tooltip{
display: block;
}