鼠标悬停时元素移动

Posted 2023-03-06

【中文标题】鼠标悬停时元素移动

【英文标题】：Element moved when I hover mouse

【发布时间】：2018-03-04 17:52:40

【问题描述】：

为什么当我将鼠标悬停在卡片图像上时移动了？！ 我正在尝试修复它，当我删除页面 direction 或从 #center 中删除 overflow-y 时，我发现它已修复但我需要它们！！ 即使我检查卡片中的元素并且鼠标悬停也可以看到所有元素都已移动但显示正确！ 我猜这可能是 chrome 浏览器中的页面渲染问题 实际上是什么问题，我该如何从技术上解决它？

JSFiddle Demo

【问题讨论】：

尝试使用 flexbox 而不是浮动。这可以通过 flexbox 轻松实现。

为什么是负分！？这是真实演示的问题！

其实我对这么好的问题和演示一起投了赞成票。不知道谁投了反对票。

尝试背面可见性：隐藏在 .div 上。它确实解决了你的问题。这是一个已知的问题。见@Thai Hoc Ha Nguyen 回答

【参考方案1】：

根据此主题，此问题似乎是 Chrome 错误： image moves on hover - chrome opacity issue 我认为你应该设置 position:relative to inner img 解决问题

【讨论】：

感谢您的提示和解决方案，已通过 set posision:relative;到卡 div ".div" jsfiddle.net/a3stn5ct/2

@javaacm 不客气。我不知道为什么有些人会自动否决这个问题，我用真实的代码演示给了你一个赞成票。永远积极，我的朋友