'next-link' 包含社交平台 .svg 文件的悬停效果缩放

Question

代码：

import InstagramIcon from './assets/IG.svg';

export const Footer = ({ footer }: FooterInterface) => {
return (
.....
  <Link href={`${footer?.instagram_link}`}>
    <a>
      <InstagramIcon />
    </a>
  </Link>
)}

这是我想要得到的：

Instagram 图标应该在悬停时放大。

Answer 1

<Link href={`${footer?.instagram_link}`} >
              <a className="hover:scale-150">
                <InstagramIcon />
              </a>
            </Link>

Answer 2

结合 https://tailwindcss.com/docs/hover-focus-and-other-states and https://tailwindcss.com/docs/scale，您可能希望将 hover:scale-150 作为 class 添加到您的 A-Tag（您可以使用其他比例大小，例如 scale-110 或 scale-120 也是）：

import InstagramIcon from './assets/IG.svg';

export const Footer = ({ footer }: FooterInterface) => {
return (
.....
  <Link href={`${footer?.instagram_link}`}>
    <a className="hover:scale-150">
      <InstagramIcon />
    </a>
  </Link>
)}

Answer 3

这是对的class

<a className="transition duration-500 transform hover:scale-125">

'transform' class也需要加上

'next-link' 包含社交平台 .svg 文件的悬停效果缩放

Scale on hover effect for a 'next-link' which contains a social platform .svg file

javascript

css

reactjs

next.js

tailwind-css