Html 悬停缩放行为在span标记内的img标记上未按预期工作

当我放大顶部图像时，它同时显示底部图像，但当我放大底部图像时，它只显示相同的图像，这是我想要的行为

如何使上面的图像与下面的图像相同

img{
宽度：3.3125em；
高度：3.3125em；
显示：块；
职位：绝对职位；
排名：0；
左：0；
边界半径：50%；
-webkit转换：所有500毫秒；
-moz转换：所有500ms；
-ms转换：所有500ms；
-o型过渡：所有500ms；
过渡：所有500ms；
光标：指针；
最大宽度：无；
保证金：0；
}
img：悬停{
-webkit盒阴影：0.5em rgba（0,0,0,0.5）；
-moz盒阴影：0.5emrgba（0,0,0,0.5）；
盒影：0.5emRGBA（0,0,0,0.5）；
宽度：21.875em；
高度：21.875em；
边缘顶部：-9.4375em；
左边距：-9.4375em；
}
保险商实验室{
列表样式：无；
填充：30px 0px 0px 150px；
}
跨度{
文本对齐：右对齐；
显示：内联块；
填充：10；
垂直对齐：中间对齐；
}
span>span{
位置：相对位置；
宽度：3.5em；
高度：3.5公分；
显示：内联块；
}

放大悬停


黄金


银币

只需向悬停对象添加一些

z-index

属性即可。这将通过更改悬停对象在z轴上的位置（“三维”）使悬停对象覆盖另一个悬停对象

请注意，

img

的

位置

属性中有一个bug。固定在下面

img{
宽度：3.3125em；
高度：3.3125em；
显示：块；
位置：绝对位置；
排名：0；
左：0；
边界半径：50%；
-webkit转换：所有500毫秒；
-moz转换：所有500ms；
-ms转换：所有500ms；
-o型过渡：所有500ms；
过渡：所有500ms；
光标：指针；
最大宽度：无；
保证金：0；
}
img：悬停{
-webkit盒阴影：0.5em rgba（0,0,0,0.5）；
-moz盒阴影：0.5emrgba（0,0,0,0.5）；
盒影：0.5emRGBA（0,0,0,0.5）；
宽度：21.875em；
高度：21.875em；
边缘顶部：-9.4375em；
左边距：-9.4375em；
z指数：1
}
保险商实验室{
列表样式：无；
填充：30px 0px 0px 150px；
}
跨度{
文本对齐：右对齐；
显示：内联块；
填充：10；
垂直对齐：中间对齐；
}
span>span{
位置：相对位置；
宽度：3.5em；
高度：3.5公分；
显示：内联块；
}

放大悬停


黄金


银币

只需向悬停对象添加一些

z-index

属性即可。这将通过更改悬停对象在z轴上的位置（“三维”）使悬停对象覆盖另一个悬停对象

请注意，

img

的

位置

属性中有一个bug。固定在下面

img{
宽度：3.3125em；
高度：3.3125em；
显示：块；
位置：绝对位置；
排名：0；
左：0；
边界半径：50%；
-webkit转换：所有500毫秒；
-moz转换：所有500ms；
-ms转换：所有500ms；
-o型过渡：所有500ms；
过渡：所有500ms；
光标：指针；
最大宽度：无；
保证金：0；
}
img：悬停{
-webkit盒阴影：0.5em rgba（0,0,0,0.5）；
-moz盒阴影：0.5emrgba（0,0,0,0.5）；
盒影：0.5emRGBA（0,0,0,0.5）；
宽度：21.875em；
高度：21.875em；
边缘顶部：-9.4375em；
左边距：-9.4375em；
z指数：1
}
保险商实验室{
列表样式：无；
填充：30px 0px 0px 150px；
}
跨度{
文本对齐：右对齐；
显示：内联块；
填充：10；
垂直对齐：中间对齐；
}
span>span{
位置：相对位置；
宽度：3.5em；
高度：3.5公分；
显示：内联块；
}

放大悬停


黄金


银币

Hi，我尝试了

z-index

问题是当你将光标移到缩放的圆圈外时，它立即显示为银色圆圈，看起来不太好，我想要完全相同的行为，如银色圆圈。没有JS，这是不可能的。问题是，一旦你离开缩放的对象，浏览器将采用其初始大小，这就是为什么另一个直接“重叠”的原因，我尝试了

z-index

问题是当你将光标移到缩放后的圆圈外时，它立即显示为银色圆圈，看起来不太好，我想要完全相同的行为，如银色圆圈。没有JS，这是不可能的。问题是，一旦你离开缩放对象，浏览器将采用其初始大小，这就是为什么另一个会立即“重叠”