React卡片图片Hover切换时添加平滑过渡效果问题求助

你当前的问题在于直接切换<img>的src属性，浏览器会直接替换图片资源，不会触发opacity的过渡效果——因为元素本身没有经历opacity的状态变化，只是图片源被替换了。要实现第一张图淡出、第二张图淡入的平滑效果，需要让两张图片同时存在并叠加，通过控制它们的opacity来实现过渡。

修改后的组件代码 #

import React, { useState } from 'react';
import './Article.css';

function Article(props) {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className='article'
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {/* 图片容器，用于叠加两张图片 */}
      <div className="article__image-container">
        {/* 默认显示的主图 */}
        <img
          className={`article__image article__image--main ${isHovered ? 'article__image--fade-out' : ''}`}
          src={props.image}
          alt={props.title}
        />
        {/* 悬停时显示的图片 */}
        <img
          className={`article__image article__image--hover ${isHovered ? 'article__image--fade-in' : ''}`}
          src={props.hoverImage}
          alt={props.title}
        />
      </div>
      <h3 className='article__title'>{props.title}</h3>
      <p className='article__price'>{props.price}</p>
    </div>
  );
}

export default Article;

修改后的CSS样式 #

.article{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 图片容器：相对定位作为内部绝对定位图片的参照 */
.article__image-container {
  width: 100%;
  max-height: 250px;
  position: relative;
  overflow: hidden;
}

.article__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}

/* 默认状态：主图显示，hover图隐藏 */
.article__image--main {
  opacity: 1;
}
.article__image--hover {
  opacity: 0;
}

/* 悬停状态：主图淡出，hover图淡入 */
.article__image--fade-out {
  opacity: 0;
}
.article__image--fade-in {
  opacity: 1;
}

核心逻辑说明 #

1. 图片容器定位：.article__image-container设置为position: relative，让内部两张绝对定位的图片能以容器为基准铺满整个区域。
2. 图片叠加：两张图片都设置position: absolute; top: 0; left: 0;，实现完全叠加。
3. 过渡触发：通过isHovered状态切换图片的opacity类，结合CSS的transition属性，实现平滑的淡入淡出效果。

如果你不想用React状态控制，也可以直接用CSS的:hover伪类来实现，这样可以省去useState：

.article__image-container:hover .article__image--main {
  opacity: 0;
}
.article__image-container:hover .article__image--hover {
  opacity: 1;
}

对应的JSX中就不需要isHovered状态和onMouseEnter/Leave事件了，代码会更简洁。

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