<!-- 9. 当鼠标移动到元素上方时，将元素向上移动一段距离 --> <p>9.-------------------</p> <img src="img/2.jpg" class="img4" >

可以使用CSS中的:hover伪类和transform属性来实现当鼠标移动到元素上方时，将元素向上移动一段距离的效果。具体实现方法如下所示：

<!-- HTML代码 -->
<img src="img/2.jpg" class="img4" >

<!-- CSS代码 -->
.img4 {
  transition: transform 0.5s; /* 添加过渡效果 */
}

.img4:hover {
  transform: translateY(-20px); /* 向上移动20像素 */
}

当鼠标移动到img元素上方时，会触发:hover伪类，此时将img元素向上移动20像素，实现了当鼠标移动到元素上方时，将元素向上移动一段距离的效果。