小编Jur*_*rij的帖子

所以这几天我一直在到处寻找，但找不到任何有用的东西。我正在使用 React 和 Bootstrap。我想要一个无状态的功能组件，它采用图像路径并返回 img 元素，当鼠标悬停在该元素上时，会放大图像，同时保持元素的尺寸相同。

我努力了：

1. 更改 onMouseOver 和 onMouseOut 事件中的 style 属性，如下所示

import React from "react";

const ImageHoverZoom = ({ imagePath }) => {
  return (
    <img
      src={imagePath}
      alt=""
      style={{ overflow: "hidden" }}
      onMouseOver={(e) => (e.currentTarget.style = { transform: "scale(1.25)", overflow: "hidden" })}
      onMouseOut={(e) => (e.currentTarget.style = { transform: "scale(1)", overflow: "hidden" })}
    />
  );
};

export default ImageHoverZoom;

2. 创建自定义 css 类并将其应用到 img 元素。

索引.css：

.hover-zoom {
  overflow: hidden;
}

.hover-zoom img {
  transition: all 0.3s ease 0s; …