CSS3 悬停效果对 Chrome 中的其他元素产生奇怪的影响

标签 css google-chrome css-transitions

我刚刚用这个 CSS3 悬停效果为我的一张图片设置了样式: http://tympanus.net/Tutorials/OriginalHoverEffects/index2.html

问题是在 Chrome 中,页面上的其他一些元素似乎会受到这种悬停效果的影响。 例如,当我悬停图像时,我的顶部菜单项链接向右移动 5px,然后在悬停效果结束时再次移动。一些 block 引用元素也会受到这种影响。就好像这些其他元素中的一些被 CSS3 过渡效果以某种奇怪的方式赋予了“填充”值。

我在 IE 和 Firefox 中没有看到这些问题,所以这个问题似乎只在 Chrome 中出现。

你们有没有遇到过类似的事情?

最佳答案

我只需要申请:-webkit-backface-visibility: hidden;所有受影响的元素,一切都在 Chrome 中运行良好。

关于CSS3 悬停效果对 Chrome 中的其他元素产生奇怪的影响,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17242922/

相关文章:

css - 将边框底部更改为边框顶部

javascript - 如何在同一页面中使用 javascript 更改 <div> 标记的可见性?

javascript - 显示新文本的过渡按钮

html - 如何解决CSS文件之间的冲突

javascript - 如何使 console.log 写入我传递的完整日志?

android - HTML 按钮适用于 Windows 浏览器,但不适用于 Android

javascript - 自定义 jQuery 轮播过渡错误

html - 水平滚动div并固定div的高度

css - Firefox 无法识别媒体查询

jquery - 图像属性是 DOM 的一部分吗(jQuery - webkit 与其他浏览器不一致)?