js实现鼠标移到链接文字弹出一个提示层的方法-前端开发

实现鼠标移到链接文字弹出一个提示层的方法，有多种方式。以下是其中一种常用的方法：

实现鼠标移到链接文字弹出一个提示层的方法，有多种方式。以下是其中一种常用的方法：

步骤 1：编写 HTML 代码

首先，在 HTML 页面中添加一个链接的 HTML 代码，如下所示：

<a href="#" class="tooltip" title="这是提示信息">链接文字</a>

上述代码中，我们创建了一个带有 tooltip 类的链接，并将提示信息以 title 属性的形式传递给它。

步骤 2：编写 CSS 样式代码

接下来，在 CSS 文件中添加以下样式：

/* 定义 tooltip 类型的链接样式 */
.tooltip {
    position: relative;
}

/* 定义要弹出的提示框样式 */
.tooltip:before {
    content: attr(title);
    position: absolute;
    background-color: #333;
    color: #fff;
    border-radius: 3px;
    padding: 5px;
    font-size: 0.8em;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    bottom: -5px;
    left: 50%;
    transform:translateX(-50%);
}

/* 显示提示框 */
.tooltip:hover:before {
    opacity:1;
    bottom:30px;
}

上述 CSS 代码中，我们定义了 tooltip 类型的链接样式，以及要弹出的提示框样式。在定义样式时，我们使用了 :before 伪元素，使得我们可以在链接的下方添加一个提示框。

步骤 3：编写 JavaScript 代码

最后，我们添加一些 JavaScript 代码，以便在鼠标移动到链接上时弹出提示框。以下是 JavaScript 代码：

// 获取所有带有 tooltip 类的链接
var tooltips = document.querySelectorAll('.tooltip');

// 循环遍历所有链接
tooltips.forEach(function(elem) {
    // 鼠标移动到链接上时，弹出提示框
    elem.addEventListener('mousemove', function(event) {
        var tooltip = this.querySelector(':before');
        tooltip.style.left = event.pageX + 'px';
        tooltip.style.top = event.pageY + 'px';
    });

    // 鼠标移出链接时，隐藏提示框
    elem.addEventListener('mouseout', function() {
        var tooltip = this.querySelector(':before');
        tooltip.style.left = '-9999px';
    });
});

上述代码中，我们首先获取所有带有 tooltip 类的链接，并循环遍历它们。当鼠标移动到链接上时，我们获取链接的 before 伪元素，并将其位置设为鼠标的坐标。当鼠标移出链接时，我们隐藏提示框。

示例说明

以上就是实现鼠标移到链接文字弹出一个提示层的完整攻略。以下是两个示例，演示了该方法的使用效果。

示例 1

在下方的示例中，当鼠标移到链接文字 hover me 上时，弹出一个包含提示信息的提示框。

<a href="#" class="tooltip" title="这是提示信息">hover me</a>

示例 2

在下方的示例中，我们定义多个带有 tooltip 类的链接，当鼠标移到它们上面时，弹出包含不同提示信息的提示框。

<a href="#" class="tooltip" title="这是第一个提示信息">Link 1</a>
<a href="#" class="tooltip" title="这是第二个提示信息">Link 2</a>
<a href="#" class="tooltip" title="这是第三个提示信息">Link 3</a>