"```markdown

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

在Web开发中，判断鼠标进入元素的方向可以为用户提供更好的交互体验。尽管通常需要JavaScript来实现这种交互，但我们可以利用CSS的::before、::after伪元素和一些CSS动画，创造出一种纯CSS的效果。

实现思路

我们将使用hover状态来检测鼠标的进入，并通过伪元素的动画效果来视觉上表现出鼠标进入的方向。以下是具体的实现步骤。

HTML结构

<div class=\"box\">
  <span>Hover me!</span>
</div>

CSS样式

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.box {
  position: relative;
  padding: 20px 40px;
  background-color: #3498db;
  color: white;
  font-size: 24px;
  overflow: hidden;
  cursor: pointer;
}

.box::before,
.box::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.1);
  z-index: -1;
  transition: transform 0.3s ease;
}

.box::before {
  transform: translateY(-100%);
}

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

.box:hover::before {
  transform: translateY(0);
}

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

方向判断

为了判断鼠标进入的具体方向，我们将通过不同的伪元素来展示方向。下面是对每个方向的实现。

从上方进入

.box:hover::before {
  transform: translateY(0);
}

从下方进入

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

从左侧进入

.box::before,
.box::after {
  width: 50%;
  height: 100%;
}

.box::before {
  left: -50%;
  transform: translateX(100%);
}

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

从右侧进入

.box::before,
.box::after {
  width: 50%;
  height: 100%;
}

.box::after {
  right: -50%;
  transform: translateX(-100%);
}

.box:hover::after {
  transform: translateX(0);
}

完整代码示例

<div class=\"box\">
  <span>Hover me!</span>
</div>

<style>
  /* CSS代码示例与上述相同 */
</style>

结论

通过上述方法，我们可以在不使用JavaScript的情况下，仅通过CSS实现简单的鼠标进入方向判断效果。利用CSS的伪元素和动画，能够为用户提供更为丰富的交互体验。虽然这种方法有其局限性，但在某些场景下，纯CSS的实现方式也能有效满足需求。