react实现鼠标移入图片放大

在React中，你可以通过结合CSS和JavaScript来实现图片在鼠标悬停时放大效果。这通常涉及到以下几个步骤：

1. 创建组件：首先，创建一个包含图片的React元素，例如`<img>`标签。

import React from 'react';

const ImageWithHoverZoom = ({ src }) => {
  return (
    <div className="image-container">
      <img src={src} alt="Image" className="zoomable-image" />
    </div>
  );
};

export default ImageWithHoverZoom;

2. CSS样式：编写CSS来定义默认状态下的图片样式以及鼠标悬停时的放大样式。可以使用伪类`:hover`来改变图像大小。

.image-container {
  position: relative; /* 确保鼠标事件可以穿透 */
}

.zoomable-image {
  width: 100%; /* 图片宽度自适应 */
  height: auto; /* 保持宽高比 */
  transition: transform 0.3s ease-in-out; /* 添加平滑过渡效果 */
}

.zoomable-image:hover {
  transform: scale(1.1); /* 缩放比例，可以根据需求调整 */
}

3. 鼠标移入/移出事件：如果你想要取消缩放当鼠标离开图片，可以在组件中添加`onMouseEnter`和`onMouseLeave`事件处理函数。

import React, { useRef, useEffect } from 'react';

// ...

const ImageWithHoverZoom = ({ src }) => {
  const imgRef = useRef(null);

  useEffect(() => {
    // 当鼠标进入图片时放大
    imgRef.current.addEventListener('mouseover', () => {
      imgRef.current.style.transform = 'scale(1.1)';
    });

    // 当鼠标离开图片时还原
    imgRef.current.addEventListener('mouseout', () => {
      imgRef.current.style.transform = '';
    });

    return () => {
      // 清除事件监听，防止内存泄漏
      imgRef.current.removeEventListener('mouseover', handleMouseEnter);
      imgRef.current.removeEventListener('mouseout', handleMouseLeave);
    };
  }, []);

  return (
    <div className="image-container">
      <img ref={imgRef} src={src} alt="Image" className="zoomable-image" />
    </div>
  );
};

export default ImageWithHoverZoom;