React中实现悬停左侧按钮切换右侧元素背景图的方法

安全阿岳

2026-7-17

解决方案

核心思路是利用行内样式优先级高于外部SCSS样式的特性，通过React状态管理动态修改目标元素的行内background-image，无需改动原有SCSS代码。

实现步骤：

在组件中引入useState钩子管理当前背景图的URL
给三个按钮绑定onMouseEnter事件，触发背景图切换逻辑
给gradient-img-container添加行内style属性，用状态值覆盖SCSS的背景图设置

完整代码示例：

import React, { useState } from 'react';

const Homepage = () => {
  // 初始值设为SCSS中原本的默认背景图URL
  const [currentBg, setCurrentBg] = useState('/assets/default-bg.jpg');

  // 切换背景图的处理函数
  const switchBackground = (imgUrl) => {
    setCurrentBg(imgUrl);
  };

  return (
    <section>
      <div className="s1-left-div">
        {/* 三个按钮分别绑定hover事件 */}
        <button 
          onMouseEnter={() => switchBackground('/assets/bg-1.jpg')}
        >
          按钮1
        </button>
        <button 
          onMouseEnter={() => switchBackground('/assets/bg-2.jpg')}
        >
          按钮2
        </button>
        <button 
          onMouseEnter={() => switchBackground('/assets/bg-3.jpg')}
        >
          按钮3
        </button>
      </div>
      <div className="s1-right-div">
        {/* 行内样式覆盖SCSS的background-image */}
        <div 
          className="gradient-img-container"
          style={{ backgroundImage: `url(${currentBg})` }}
        ></div>
      </div>
    </section>
  );
};

export default Homepage;

补充说明：

如果需要鼠标离开按钮时恢复默认背景图，给按钮添加onMouseLeave事件即可：

<button 
  onMouseEnter={() => switchBackground('/assets/bg-1.jpg')}
  onMouseLeave={() => switchBackground('/assets/default-bg.jpg')}
>
  按钮1
</button>