CSS实现鼠标悬停div跳动效果 - 简单代码示例

以下是一个简单的实现示例：

HTML代码：

<div class='box'></div>

CSS代码：

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  position: relative;
  top: 0;
  transition: top 0.2s ease-out;
}

.box:hover {
  top: -10px;
}

解释：

1. 首先定义一个红色的正方形div，高宽均为100px。
2. 将其定位为相对定位 (position: relative)，并设置top属性为0，表示初始状态下div的位置在正常位置。
3. 设置一个过渡效果，当top属性变化时，会有0.2秒的过渡时间，缓动函数为ease-out，使得动画效果更加自然。
4. 当鼠标悬停在div上时，将top属性值设为-10px，即向上移动10px，触发动画效果。

这样就实现了当鼠标放到div上时div向屏幕跳起的动态效果。