[分享]css中 鼠标悬浮时 怎么让图片上移

在CSS中，我们可以通过:hover伪类实现鼠标悬浮在图片上时的效果。而想要让图片上移，可以结合属性和top属性进行设置。/ 鼠标悬浮时图片上移 / img:hover { : relative; /...

在CSS中，我们可以通过:hover伪类实现鼠标悬浮在图片上时的效果。而想要让图片上移，可以结合position属性和top属性进行设置。

/* 鼠标悬浮时图片上移 */
img:hover {
  position: relative; /* 相对定位 */
  top: -10px; /* 上移10像素 */
} 

在上面的代码中，我们首先选定img元素并使用:hover伪类来表示鼠标悬浮在图片上时的效果。接着，我们使用position属性将图片设置为相对定位，这样在上移时不会影响到其他元素的位置。最后，我们使用top属性来设置图片向上移动的距离，这里我们设定为10像素。

值得注意的是，top值可以为负数，表示上移；也可以为正数，表示下移。同时，我们还可以通过left属性来实现图片向左或向右移动的效果。

总之，使用:hover伪类和position、top属性的组合，我们可以轻松实现在鼠标悬浮时让图片上移的效果。