在Chrome中显示图片悬停时出现的Stange问​​题 [英] Stange issue with image hover in Chrome

问题描述

我有一个html / css网站，当您将鼠标悬停在图片上时，它会使用效果来放大图片。它工作正常，但使用Chrome时，它会导致图像抖动和调整页面加载大小。它似乎不在其他浏览器中这样做，而不是在Dreamweaver浏览器测试中做到这一点。如果我删除效果页面加载正常。

I have an html/css site that uses an effect to magnify images when you hover over them. It works fine, but when using Chrome, it causes the images to jitter and resize on page load. It doesn't seem to do this in other browsers, and doesn't do it in the Dreamweaver browser test, either. If I remove the effect the page loads fine. Any ideas what could cause this?

以下是此网页的连结： http://carissalyn.com/Landing.html

Here's a link to the page: http://carissalyn.com/Landing.html

以下是图片的HTML：

Here is the html for the images:

<tr>
<td><a href="" class="imghover"><img src="images/leaf.jpg" alt="portrait" class="border"></a></td>
<td><a href="" class="imghover"><img src="images/DSC_2280-Edit-Edit-Final.jpg"  alt="portrait" class="border"></a></td>
<td><a href="" class="imghover"><img src="images/DSC_2685.jpg" alt="blog" class="border"></a></td>
</tr>

，这里是悬停的css：

and here is the css for the hover:

.imghover img{
-webkit-transition-duration: 1s; 
-moz-transition-duration: 1s; 
-o-transition-duration: 1s; 
}
.imghover img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1); 
-o-transform:scale(1.1); 
}

推荐答案

。找到了此网站的修正。这是一种黑客，但似乎工作。关键是在缩放时添加一点点旋转。

I was having a similar issue. Found a fix on this site. It's sort of hackish but seems to work. The key is to add a tiny bit of rotation along with the zoom.

.imghover img:hover {
    transform: scale(2) rotate(0.1deg);
}

这篇关于在Chrome中显示图片悬停时出现的Stange问​​题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！