把鼠标指针放到某div元素上，其宽度会从50px逐渐变为200px

打野赵怀真
274 阅读2分钟

实现鼠标悬停时宽度变化的效果

在前端开发中，鼠标悬停效果是一种常见的交互效果。本文将介绍如何通过 CSS 和 JavaScript 实现一个简单的效果：当鼠标指针放到某个 div 元素上时，其宽度从 50px 渐变到 200px。我们将使用 CSS 的过渡效果来实现这一目标。

HTML 结构

首先，我们需要定义基本的 HTML 结构。在这里，我们创建一个 div 元素并赋予一个类名，以便于后续的样式设置。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标悬停宽度变化效果</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="hover-box"></div>
    <script src="script.js"></script>
</body>
</html>

CSS 样式

接下来，我们为 div 元素添加样式。我们将设置初始宽度、背景颜色和过渡效果。

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 让 div 居中 */
    margin: 0;
    background-color: #f0f0f0; /* 背景颜色 */
}

.hover-box {
    width: 50px; /* 初始宽度 */
    height: 100px; /* 高度 */
    background-color: #3498db; /* 背景颜色 */
    transition: width 0.5s ease; /* 设置过渡效果 */
}

/* 鼠标悬停时的样式 */
.hover-box:hover {
    width: 200px; /* 悬停时宽度 */
}

JavaScript 交互（可选）

虽然仅使用 CSS 就足以实现基本的效果，但我们也可以使用 JavaScript 来增强交互体验，例如在鼠标悬停时添加或移除类。

// script.js
const hoverBox = document.querySelector('.hover-box');

// 添加鼠标悬停事件
hoverBox.addEventListener('mouseenter', () => {
    hoverBox.classList.add('hover');
});

// 添加鼠标移出事件
hoverBox.addEventListener('mouseleave', () => {
    hoverBox.classList.remove('hover');
});

效果演示

通过上述代码，当用户将鼠标指针悬停在 .hover-box 上时，div 的宽度会从 50px 渐变到 200px，带来流畅的动画效果。这种效果可以用于按钮、菜单项或其他需要用户注意的元素。

总结

本文介绍了如何通过 HTML、CSS 和 JavaScript 实现鼠标悬停时宽度变化的效果。通过简单的样式设置和过渡效果，我们可以轻松创建出流畅的交互体验。以下是实现效果的关键点：

  1. 使用 CSS 过渡效果：通过 transition 属性设置宽度变化的动画时长和曲线。
  2. 灵活的 HTML 结构：通过简单的 div 元素构建基础。
  3. 可选的 JavaScript 交互：使用事件监听器增强用户体验。

希望这篇文章能帮助您理解如何实现鼠标悬停效果，提升您的前端开发技能。

avatar
文章
阅读
粉丝