鼠标悬停显示详情且不影响周边组件的实现方案咨询

问题现象 #

鼠标悬停组件时，希望放大组件并显示更多详情，但当前实现会导致周边组件移位。

问题原因 #

你的代码存在两个触发移位的核心问题：

• .ct-card-toggle 在 hover 时从 display:none 切换为 display:flex，这会直接改变父容器的高度，触发页面布局重排，导致下方元素移位。
• 虽然 transform:scale3d 本身不会修改元素的盒模型尺寸，但如果父容器未设置合适的定位基准或溢出规则，放大的卡片可能会和周边元素产生视觉上的挤压，或者被父容器裁剪，间接引发布局异常。

修复方案 #

1. 用绝对定位处理额外内容，避免高度变化影响布局 #

将 .ct-card-toggle 设置为绝对定位，使其脱离文档流，这样显示/隐藏时不会改变父容器的高度：

const ctCardHoveredSx = {
  maxWidth: 300,
  position: 'relative', // 为绝对定位的子元素提供定位基准
  '& .ct-card-toggle': {
    display: 'none',
    position: 'absolute',
    bottom: 0, // 可根据需求调整显示位置，比如 top: 0
    left: 0,
    right: 0,
    zIndex: 3, // 确保额外内容在卡片上方显示
  },
  '&:hover .ct-card-toggle': {
    display: 'flex',
  },
  '& .ct-card': {
    transition: 'transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out',
    boxShadow: 'none',
    position: 'relative',
  },
  '&:hover .ct-card': {
    transform: 'scale3d(1.25, 1.25, 1)',
    boxShadow: 5, // MUI 阴影值无需加引号
    zIndex: 10, // 提高层级，让放大的卡片覆盖其他组件
  }
};

2. 确保父容器允许溢出内容显示 #

如果卡片所在的父容器（如 MUI Grid/Flex 容器）设置了 overflow:hidden，需改为 overflow:visible，防止放大的卡片被裁剪：

// 示例：父容器为 MUI Grid
<Grid container sx={{ overflow: 'visible' }}>
  {/* 你的卡片组件 */}
</Grid>

3. 可选：调整放大原点（transform-origin） #

如果需要卡片从特定位置（如左上角、右下角）放大，可添加 transform-origin 属性：

'& .ct-card': {
  // ...其他样式
  transformOrigin: 'top left', // 可设置为 center、bottom right 等值
}

核心原理 #

• 绝对定位元素不参与文档流布局，显示/隐藏时不会触发页面重排，避免周边元素移位。
• transform:scale 仅改变元素视觉大小，不修改其布局占位，配合足够的 z-index 可让放大的卡片覆盖其他元素，而非挤开它们。
• 父容器设置 position:relative 是为了让绝对定位的子元素以父容器为基准定位，防止脱离到页面根节点。

内容的提问来源于stack exchange，提问作者czetsuya