Css Safari中的绝对定位混乱

我试着用jQuery做鼠标悬停效果。其想法是以这种方式将两个图像放置在彼此的顶部

<img class="img-circle webdesign " src="assets/img/webdesign_.png" style="position: absolute;" >
<img class="img-circle" src="assets/img/webdesign_hover.png">

它与铬合金配合使用效果很好。截图（）

但是，我对Safari（）有这个问题

当页面加载时，您可以看到这两个图像，即使灰度图像应该显示在彩色图像的顶部，并隐藏后者

建议

HTML

<img class="img-circle webdesign " src="assets/img/webdesign_.png">
<img class="img-circle" src="assets/img/webdesign_hover.png" style='display:none;'>

CSS

我也有一些问题（仅在Safari中）与元素有绝对定位。 我通过指定左侧和右侧属性修复了此问题：

.element{
位置：绝对位置；
左：0；
右：0；
}

将两个

位置都设置为绝对位置

，将两者的

顶部

和

左侧

属性设置为相同，将顶部的

z索引

设置为更大。或者，更好的是，使用

display:none

将底部的一个完全隐藏，并使用jQuery切换它们的可见性。设置explicit

top

和

left

应该可以

z-index

不会有帮助，除非你需要在后者之上加上前者。@Jan是的，但因为他打算切换顺序，以提供相应的机制。不过我还是喜欢另一种方法。。。

$('.img-circle').mouseenter(function() {
    $('.img-circle').toggle();
});

.img-circle {
    position: absolute;
    top: ???;
    left: ???;
}