css - Safari中的绝对定位搞砸了

Question

我试图用 jQuery 做一个鼠标悬停淡入淡出效果。这个想法是让两个图像以这种方式相互叠加。

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

它适用于 Chrome。截图（http://cl.ly/image/0f3M0f2q1t2S）

但是，我在使用 Safari 时遇到了这个问题（http://cl.ly/image/44290O3n1X0b）

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

建议？

Answer 1

对于具有绝对定位的元素，我也遇到了一些问题（仅限 Safari）。我通过指定左右属性解决了这个问题：

.element{
  position:absolute;
  left:0;
  right:0;
}

Answer 2

HTML

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

JS

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

CSS

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

Answer 3

在类似的挑战中，这对我有用：

position: absolute;
top: 8px;
margin-left: 14px;