Question

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

以下是一个工作示例：fiddle

这是我的代码：

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）？

感谢。

Answer 1

在 pure CSS中，创建解决方案几乎是不可能的。但也许这适合你：在description-tag周围创建一个包装器，并将其显示为相对位置的块，z-index减去1（描述的z-index减去1）。并添加规则，在悬停包装器时，描述显示为块。 <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/

光标后面的工具提示

1 个答案: