0

我创建了一个工具提示，当您将鼠标悬停在图标上时会出现，但唯一的问题是它没有跟随光标，因此有时会卡住。

这是一个工作示例：小提琴

这是我的代码：

HTML

<a href="#" class="tooltip"><img src="http://i.imgur.com/JkhlPKF.png"><span>Equipment</span></a>
<a href="#" class="tooltip"><img src="http://i.imgur.com/lgHQamk.png"><span>Maps</span></a>

CSS

.tooltip {
    text-decoration:none;
    color: black;
    position: relative;
}
.tooltip:hover {
    text-decoration: none;
    cursor: default;
}
.tooltip span {
    display: none;
}
.tooltip:hover span {
    display: block;
    position: absolute;
    width: 80px;
    z-index: 100;
    background: #FFFFCC;
    text-align: center;
    border: 1px solid black;
    text-decoration: none;
}

如果无法通过 CSS 实现，是否可以使用简单的 JavaScript（不是 jQuery，我正在处理的项目不允许使用 jQuery）？

谢谢。

4

1 回答 1

0

在纯CSS 中创建解决方案几乎是不可能的。但也许这适合你：在描述标签周围创建一个 wrapper-span 并将其显示为相对位置的块，z-index 减一（描述的 z-index 减一）。并添加规则，在悬停包装器时，描述将显示为一个块。 <a href="#" class="tooltip"><img src="http://i.imgur.com/JkhlPKF.png"><span class="wrapper"><span class="describe">Equipment</span></span></a>

我创建了一个例子（基于你的）：http: //jsfiddle.net/T2YxQ/

于 2013-09-10T19:41:19.347 回答