当我将鼠标悬停在图像上时,为什么我页面上的元素会略微移动?

时间:2014-01-31 15:44:15

标签: css wordpress html relative

以下是链接:http://www.levomedia.com/Commercial%20%20%20Baker%20Wilkins%20&%20Smith.htm

如果仔细观察主框内部有八个图像,如果将鼠标悬停在一个上面并等待,则可以看到元素移动得非常轻微,图像和元素似乎尝试将自己调整到一个新位置。当您取下悬停时,它们通常会移回到之前的位置。

一定是因为我认为有些冲突的CSS属性,但我尝试了很多不同的东西,似乎无法找出问题的根源。

问题仍然存在于下一页。同样在这个页面上,滚动似乎比平常慢;我认为这是因为重新调整图像会降低浏览器的速度。链接:http://www.levomedia.com/Projects.htm

非常感谢。

2 个答案:

答案 0 :(得分:0)

那是由于过渡!您可以看到添加到您网站的过渡。

当您将鼠标悬停在图像上时,转换将执行操作,并且元素的位置会在一段时间内更改(您提供的1秒时间)。

请尝试改变这个价值!

答案 1 :(得分:0)

此元素添加了 -webkit-transform:scale(1,1); 。我认为这是导致它的原因,因为它基本上已经缩小了:

<div class="project_holder widget_anim" style="transition: 200ms 600ms; -webkit-transition: 200ms 600ms; opacity: 1; -webkit-transform: scale(1, 1);">

这些样式选项可能是由一些javascript插件添加的,也许只是尝试用css自己设置动画