JS鼠标移入移出显示和隐藏|极客笔记

JS鼠标移入移出显示和隐藏

在网页开发中，常常需要通过JavaScript来实现一些交互效果，其中一个常见的需求就是鼠标移入移出时显示和隐藏某个元素。这种效果可以通过JavaScript的事件监听和DOM操作来实现。

本文将详细讲解如何使用JavaScript实现鼠标移入移出时显示和隐藏元素的效果，并给出示例代码和效果演示。

1. HTML结构

首先，我们需要在HTML中创建一个具有显示隐藏效果的元素。例如，我们创建一个按钮，当鼠标移入时显示一个提示框，鼠标移出时隐藏提示框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS鼠标移入移出显示和隐藏</title>
</head>
<body>
    <button id="btn">Hover me</button>
    <div id="tooltip">This is a tooltip</div>
    <script src="app.js"></script>
</body>
</html>

在上面的示例中，我们创建了一个按钮元素和一个提示框元素，按钮元素具有id为btn，提示框元素具有id为tooltip。

2. CSS样式

为了让元素具有显示隐藏的效果，我们需要通过CSS样式来定义元素的初始状态和样式。

#tooltip {
    display: none;
    position: absolute;
    background-color: #ccc;
    padding: 10px;
    border-radius: 5px;
}

在上面的CSS样式中，我们将提示框元素的display属性设置为none，表示初始状态下提示框是隐藏的。我们将其定位为绝对定位，并设置了背景色、内边距和边框圆角样式。

3. JavaScript实现

接下来，我们使用JavaScript来实现鼠标移入移出时显示和隐藏提示框的效果。

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

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

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

在上面的JavaScript代码中，我们通过document.getElementById方法获取按钮和提示框元素，并分别将它们保存在btn和tooltip变量中。然后，我们使用addEventListener方法为按钮元素添加mouseover和mouseout事件监听器，当鼠标移入按钮时显示提示框，移出按钮时隐藏提示框。