我有一个小下拉菜单:bootply
现在我的问题是我无法让悬停文本工作,我希望每当您将鼠标悬停在图标上时,菜单旁边都会出现文本,这样您就会得到一个小文本来显示您正在单击的内容,例如在主页图标旁边,我希望文本显示为“主页”,最好不要显示在内容之后。
这是我想要的示例:example
我真的希望有人能帮我解决这个问题,如果我不够清楚,请告诉我如何让自己清楚。
最佳答案
您可能听说过 CSS 工具提示。以下是您如何制作自己的作品。
您可以使用 data-*
属性来创建仅具有 css3 功能的工具提示。您需要稍微更改您的标记,或者我会说您需要将 data-*
属性添加到您的 li
元素中:
<div class="menu">
<button type="button" class="btn btn-menu dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bars"></i>
</button>
<ul class="dropdown-menu arrow_box">
<li data-tooltip="Info">
<a href="#">
<i class="fa fa-info hover-btn" ></i>
</a>
</li>
<li data-tooltip="Cubes">
<a href="#">
<i class="fa fa-cubes hover-btn" ></i>
</a>
</li>
<li data-tooltip="paint-brush">
<a href="#">
<i class="fa fa-paint-brush hover-btn" ></i>
</a>
</li>
<li data-tooltip="paper-plane">
<a href="#">
<i class="fa fa-paper-plane hover-btn" ></i>
</a>
</li>
</ul>
</div>
你需要有这个css:
.dropdown-menu>li{position:relative;}
.dropdown-menu>li[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
left: 40px;
top: 10px;
min-width: 75px;
border: 1px solid rgba(0,0,0,.15);
border-radius: 2px;
background: white;
padding: 3px;
color: #000000;
font-size: 11px;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
Bootply in action.
关于jquery - 下拉菜单在悬停时显示文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32394042/