JS 鼠标悬停显示文字|极客笔记

JS 鼠标悬停显示文字

在网页开发中，经常会遇到鼠标悬停显示提示文字的需求。这时候我们可以借助JavaScript来实现这个功能。通过监听鼠标的移入和移出事件，我们可以动态地显示或隐藏提示文字。

下面就让我们详细地来讨论一下如何利用JavaScript来实现鼠标悬停显示文字的效果。

1. HTML 结构

首先，我们需要在HTML文件中定义相关的结构。假设我们有一个按钮，当鼠标悬停在按钮上时，会显示相应的提示文字。HTML结构可以设计如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS 鼠标悬停显示文字</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button class="btn" id="btn">悬停我</button>
    <div class="tooltip" id="tooltip">这是一个提示文字</div>
    <script src="script.js"></script>
</body>
</html>

在上面的代码中，我们定义了一个按钮和一个提示框。按钮的id为”btn”，提示框的id为”tooltip”。

2. CSS 样式

为了让提示文字能够更好地显示，我们需要为提示文字添加一些CSS样式。在styles.css文件中添加如下样式：

.tooltip {
    display: none;
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
}

在上面的代码中，我们定义了提示框的样式，包括背景色、字体颜色、内边距等。

3. JavaScript 实现

接下来，我们需要编写JavaScript代码来实现鼠标悬停显示文字的功能。在script.js文件中添加如下代码：

const btn = document.getElementById('btn');
const tooltip = document.getElementById('tooltip');

btn.addEventListener('mouseover', () => {
    tooltip.style.display = 'block';
});

btn.addEventListener('mouseout', () => {
    tooltip.style.display = 'none';
});

在上面的代码中，我们首先通过getElementById方法获取按钮和提示框的元素。然后分别给按钮添加鼠标移入和移出事件监听器。当鼠标移入按钮时，提示框显示出来；当鼠标移出按钮时，提示框隐藏。