实现容器悬停元素位移：选择CSS还是JavaScript？

完全不需要用到JavaScript，利用CSS的:hover伪类配合transform属性就能轻松实现你要的效果，而且性能更优。

实现思路 #

通过给容器设置:hover状态，控制内部的图片和图标分别执行位移变换，配合transition还能添加平滑的过渡动画。

代码示例 #

HTML结构

<div class="container">
  <img src="your-image-path" alt="展示图片" class="container-image">
  <span class="container-icon">📌</span>
</div>

CSS样式

/* 容器基础样式，按需调整尺寸 */
.container {
  position: relative;
  width: 350px;
  height: 350px;
  border: 1px solid #eee;
  overflow: hidden; /* 可选：防止元素移出容器后超出显示 */
}

/* 图片默认样式 */
.container-image {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease; /* 过渡动画，时长可调整 */
}

/* 图标默认样式，用绝对定位固定位置 */
.container-icon {
  position: absolute;
  bottom: 30px;
  left: 30px;
  font-size: 32px;
  transition: transform 0.3s ease;
}

/* 容器悬停时的图片位移 */
.container:hover .container-image {
  transform: translateY(-40px); /* 向上移动40px */
}

/* 容器悬停时的图标位移 */
.container:hover .container-icon {
  transform: translateX(40px); /* 向右移动40px */
}

说明 #

• 使用transform: translate()是最优选择，因为它不会触发浏览器的重排重绘，动画性能比修改margin、top/left更好。
• transition属性用来添加平滑的过渡效果，让位移过程更自然，你可以调整0.3s这个值来控制动画快慢。

内容的提问来源于stack exchange，提问作者btothemoon