如何在Framer Motion与Material UI中实现文字hover时缩放图标

你现在的问题是把whileHover只绑定在了图标自己的motion.div上，只有鼠标碰到图标区域才会触发缩放，悬停文字的时候根本没触发到这个hover事件。要实现悬停文字或整个容器都触发图标缩放，有两种简单的解决方式：

方式一：用Variants关联父容器与子元素动画 #

通过Framer Motion的variants特性，让父容器的hover状态传递给子图标元素：

<ListItem sx={{ fontSize: '14px' }}>
  <motion.div 
    style={{ display: 'flex', alignItems: 'center' }}
    whileHover="hover"
    variants={{ hover: {} }} // 父容器本身不需要动画，仅传递状态
  >
    <Link href='/Blog' style={{ marginRight: '4px' }}>Blog</Link>
    <motion.div 
      variants={{ hover: { scale: 1.2 } }}
      style={{ marginLeft: '4px' }}
    >
      <CallMadeIcon sx={{ fontSize: '18px' }} />
    </motion.div>
  </motion.div>
</ListItem>

当鼠标悬停在外层包含文字和图标的motion.div时，父容器进入hover状态，子图标容器会自动响应这个状态执行缩放动画，不管悬停文字还是图标都能触发效果。

方式二：利用CSS选择器直接控制子元素 #

这种方式更简洁，不需要给图标单独加motion.div，直接在父容器的whileHover里通过CSS选择器指定子元素的动画：

<ListItem sx={{ fontSize: '14px' }}>
  <motion.div 
    style={{ display: 'flex', alignItems: 'center' }}
    whileHover={{ '& > div': { scale: 1.2 } }}
  >
    <Link href='/Blog' style={{ marginRight: '4px' }}>Blog</Link>
    <div style={{ marginLeft: '4px' }}>
      <CallMadeIcon sx={{ fontSize: '18px' }} />
    </div>
  </motion.div>
</ListItem>

这里通过& > div选择父容器下的直接子div（也就是图标容器），当父容器被悬停时，这个子div就会执行缩放动画，效果和方式一完全一致，代码更短。

内容的提问来源于stack exchange，提问作者Julius San Jose