用纯CSS实现判断鼠标进入的方向## 纯CSS实现判断鼠标进入的方向在前端开发中，我们经常需要根据鼠标的进入方向来进

纯CSS实现判断鼠标进入的方向

在前端开发中，我们经常需要根据鼠标的进入方向来进行一些交互效果的展示，比如菜单的动画效果或者按钮的过渡效果。虽然JavaScript可以很轻松地解决这一问题，但如果只使用CSS来实现，是否也能达到类似的效果呢？答案是肯定的，CSS可以通过 :hover 伪类、CSS3的 transform、transition 等属性，结合一些技巧来判断鼠标的进入方向。

1. 基本思路

实现鼠标进入方向的核心思想是利用 CSS 的 ::after 或 ::before 伪元素结合 transform 属性，通过鼠标进入的方向动态地应用不同的动画效果。我们通常会通过父元素的相对位置来实现这些动画效果，从而模拟出鼠标进入的方向。

2. 实现步骤

我们可以通过以下步骤来实现：

父元素设置相对定位：使得子元素（即伪元素）可以相对于父元素定位。
伪元素设置位置：利用伪元素在父元素的边界上设置四个位置（上、下、左、右）。
动画效果：当鼠标经过时，通过 transform 和 transition 来实现不同方向的进入效果。

3. 代码实现

下面的示例代码展示了如何用纯CSS来实现判断鼠标进入方向：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>鼠标进入方向判断</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .box {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: #3498db;
      overflow: hidden;
      border-radius: 10px;
    }

    .box::before,
    .box::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #fff;
      transition: transform 0.4s ease-in-out;
    }

    .box::before {
      top: 0;
      left: -100%;
    }

    .box::after {
      top: -100%;
      left: 0;
    }

    .box:hover::before {
      transform: translateX(100%);
    }

    .box:hover::after {
      transform: translateY(100%);
    }

    /* 鼠标从顶部进入 */
    .box:hover::before {
      transform: translateX(100%);
    }

    /* 鼠标从左侧进入 */
    .box:hover::after {
      transform: translateY(100%);
    }

    .box:hover::after {
      top: