HTML中的鼠标悬停功能如何实现图片弹出或缩放？

Question

我是一个Oracle专家，正在苦苦挣扎地编写一个HTML函数，非常希望得到您的帮助。 我的目标是有4张图片或一张由4部分组成的图片，当鼠标悬停在每个部分上时，它需要弹出或放大。 最终，我希望任何部分的鼠标悬停都能弹出。 顺便说一下，我可以将部分保存为图片。因此，原始图片将被分成4部分。 请分享代码来实现此功能，或者如果您有任何信息，请告诉我，非常感谢您的帮助。谢谢！

- user2730114

---

请展示与此相关的 CSS 代码。 - ScaisEdge

Answer 1

要实现弹出效果最简单的方法是在鼠标悬停在元素上时应用CSS 2D缩放变换。可以像这样：

.part {
  background-color: #ddf;
  padding: 30px;
  margin: 10px;  
  border: 1px solid #333;
  transition: 0.15s;
}
.part:hover {
  transform: scale(1.02);
}

<div class='part'>Part 1</div>
<div class='part'>Part 2</div>
<div class='part'>Part 3</div>
<div class='part'>Part 4</div>

- Michael Arrison