JS 鼠标移入移出|极客笔记

JS 鼠标移入移出

在Web开发中，经常会遇到需要处理用户鼠标悬停在某个元素上或者移出元素的情况。这时候就需要使用JavaScript来进行相应的操作，例如显示隐藏菜单，改变样式或者触发一些动作等。本文将详细介绍如何使用JS实现鼠标移入移出的效果。

HTML结构

首先，我们需要在HTML中添加一个需要操作的元素，比如一个按钮或者一个带有菜单的<div>。以下是一个简单的HTML结构示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Hover Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="menu">
        <button id="btn">Hover Me</button>
        <ul>
            <li>Menu Item 1</li>
            <li>Menu Item 2</li>
            <li>Menu Item 3</li>
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

在上面的示例中，我们有一个包含按钮和菜单项的<div>，按钮的id为btn，菜单项使用<ul>和<li>标签嵌套。

CSS样式

为了让按钮和菜单看起来更加美观，我们可以添加一些CSS样式：

.menu {
    position: relative;
}

button {
    padding: 10px 20px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: pointer;
}

ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 5px;
}

li {
    cursor: pointer;
}

在上面的样式中，我们设置了按钮和菜单的样式，使其看起来更加美观。

JS实现

接下来，我们使用JavaScript来实现当鼠标移入按钮时显示菜单，移出时隐藏菜单的效果。在script.js文件中添加以下代码：

const button = document.getElementById('btn');
const menu = document.querySelector('.menu ul');

button.addEventListener('mouseover', function() {
    menu.style.display = 'block';
});

button.addEventListener('mouseout', function() {
    menu.style.display = 'none';
});

在上面的代码中，我们首先通过document.getElementById和document.querySelector来获取按钮和菜单的元素，然后使用addEventListener方法来监听按钮的mouseover（鼠标移入）和mouseout（鼠标移出）事件，分别在事件发生时改变菜单的display属性来实现显示和隐藏。