【发布时间】：2016-02-04 15:04:32
【问题描述】：
我有三张图片（透明 png）
使用以下 html/css 堆叠
<div style="position: relative; left: 0; top: 0;">
<img src="img/main.png" style="position: absolute; top: 0; left: 0;" />
<img src="img/middle.png" style="position: absolute; top: 0; left: 0;"/>
<img src="img/center.png" style="position: absolute; top: 0; left: 0;"/>
</div>
得到这个：
我想在每个图像上添加悬停效果（放大、边框、不透明度等）。
在悬停时放大的普通 CSS 是：
img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
img:hover {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
在这种情况下不起作用，因为悬停效果会应用于整个图像而不仅仅是图像部分（图像具有透明背景）。
我的问题是，是否可以使用不规则形状的 CSS 设置透明图像的样式？
jsfiddle 在这里：http://jsfiddle.net/h4mxysw5/
编辑：
似乎有些混乱。我不想一次缩放所有三个图像。
例如 - 当悬停在中心图像上时，我只想缩放中心图像（不是全部）。
更新了带边框的 jsfiddle：http://jsfiddle.net/h4mxysw5/4/
【问题讨论】：
-
由于这些形状看起来相当简单，您是否考虑过使用 SVG？
-
@php_nub_qq 我想到了，但我也有复杂的图像。我正在分析可能的解决方案（例如 Flash 等）
-
您可以使用 :nth-child 选择器选择包装器的任何子级。但我建议您使用不同的顶部、左侧和 z-index 来定位 img，为什么您需要所有 img 的图像？两个内圈很容易用简单的 html/css (border-radius) 重现。
标签： javascript jquery html css