js两次悬浮样式不一样怎么写

要实现JS中两次悬浮样式不一样，可以使用事件监听、状态管理、元素样式修改等技术。通过监听鼠标的悬浮事件（mouseenter 和 mouseleave），结合状态管理实现两次悬浮样式的不同。

下面，我将详细展开介绍如何在JS中实现两次悬浮样式不一样的效果。

一、理解悬浮事件和状态管理

在网页开发中，常常需要响应用户与页面元素的交互事件。悬浮事件是用户体验设计中的一个重要部分。通过监听元素的悬浮事件，可以实现丰富的视觉效果。

1. 悬浮事件

悬浮事件主要包括 mouseenter 和 mouseleave。mouseenter 事件在鼠标指针移到元素上方时触发，而 mouseleave 事件在鼠标指针移出元素时触发。

2. 状态管理

为了实现两次悬浮样式不一样的效果，需要引入状态管理。可以通过一个布尔值来记录悬浮的次数。例如，第一次悬浮时设置为 true，第二次悬浮时设置为 false，依次循环。

二、HTML结构

首先，创建一个简单的 HTML 结构，用于展示悬浮效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两次悬浮样式不一样</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 50px auto;
            text-align: center;
            line-height: 200px;
            font-size: 20px;
            transition: background-color 0.3s, transform 0.3s;
        }
        .first-hover {
            background-color: lightgreen;
            transform: scale(1.1);
        }
        .second-hover {
            background-color: lightcoral;
            transform: scale(0.9);
        }
    </style>
</head>
<body>
    <div class="box" id="hoverBox">悬浮我</div>
    <script src="script.js"></script>
</body>
</html>

三、JavaScript代码实现

接下来，在 script.js 文件中编写 JavaScript 代码，实现两次悬浮样式不一样的效果。

document.addEventListener('DOMContentLoaded', function() {
    var hoverBox = document.getElementById('hoverBox');
    var isFirstHover = true;
    hoverBox.addEventListener('mouseenter', function() {
        if (isFirstHover) {
            hoverBox.classList.add('first-hover');
            hoverBox.classList.remove('second-hover');
        } else {
            hoverBox.classList.add('second-hover');
            hoverBox.classList.remove('first-hover');
        }
        isFirstHover = !isFirstHover;
    });
    hoverBox.addEventListener('mouseleave', function() {
        hoverBox.classList.remove('first-hover', 'second-hover');
    });
});

四、代码解析

1. 事件监听

在 DOMContentLoaded 事件触发后，确保 DOM 树已经完全构建。然后获取要操作的 DOM 元素（hoverBox），并为其添加 mouseenter 和 mouseleave 事件监听器。

2. 状态管理与样式切换

通过 isFirstHover 变量记录当前的悬浮状态。在 mouseenter 事件中，根据 isFirstHover 的值切换不同的样式类（first-hover 和 second-hover），并在每次悬浮后切换 isFirstHover 的值。

3. 样式重置

在 mouseleave 事件中，移除所有悬浮样式类，以便下一次悬浮时重新应用相应的样式。

五、其他实现方式

除了上述方法外，还有一些其他的实现方式，比如使用 CSS 变量、CSS 动画等。

1. 使用 CSS 变量

可以通过 CSS 变量来实现不同的样式切换。在 JavaScript 中动态修改 CSS 变量的值，以实现不同的悬浮效果。

:root {
    --hover-color: lightblue;
    --hover-scale: 1;
}
.box {
    background-color: var(--hover-color);
    transform: scale(var(--hover-scale));
    transition: background-color 0.3s, transform 0.3s;
}

document.addEventListener('DOMContentLoaded', function() {
    var hoverBox = document.getElementById('hoverBox');
    var isFirstHover = true;
    hoverBox.addEventListener('mouseenter', function() {
        if (isFirstHover) {
            document.documentElement.style.setProperty('--hover-color', 'lightgreen');
            document.documentElement.style.setProperty('--hover-scale', '1.1');
        } else {
            document.documentElement.style.setProperty('--hover-color', 'lightcoral');
            document.documentElement.style.setProperty('--hover-scale', '0.9');
        }
        isFirstHover = !isFirstHover;
    });
    hoverBox.addEventListener('mouseleave', function() {
        document.documentElement.style.setProperty('--hover-color', 'lightblue');
        document.documentElement.style.setProperty('--hover-scale', '1');
    });
});

2. 使用 CSS 动画

通过 CSS 动画，可以实现更加复杂的悬浮效果。在 mouseenter 事件中触发不同的动画，实现两次悬浮样式的不同。

@keyframes firstHover {
    0% { background-color: lightblue; transform: scale(1); }
    100% { background-color: lightgreen; transform: scale(1.1); }
}
@keyframes secondHover {
    0% { background-color: lightblue; transform: scale(1); }
    100% { background-color: lightcoral; transform: scale(0.9); }
}
.box {
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

document.addEventListener('DOMContentLoaded', function() {
    var hoverBox = document.getElementById('hoverBox');
    var isFirstHover = true;
    hoverBox.addEventListener('mouseenter', function() {
        if (isFirstHover) {
            hoverBox.style.animationName = 'firstHover';
        } else {
            hoverBox.style.animationName = 'secondHover';
        }
        isFirstHover = !isFirstHover;
    });
    hoverBox.addEventListener('mouseleave', function() {
        hoverBox.style.animationName = '';
    });
});

六、总结

通过对 JavaScript 事件监听和状态管理的结合，可以实现元素两次悬浮样式不一样的效果。理解事件模型、掌握状态管理、熟悉样式修改，是实现此类交互效果的关键。在实际开发中，可以根据需求选择不同的实现方式，如使用 CSS 变量或 CSS 动画，来丰富用户体验。

此外，在团队协作和项目管理中，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，以提高效率和协作效果。这些工具可以帮助开发团队更好地管理任务、跟踪进度、协同工作，从而实现更高效的项目开发和管理。