在 React 组件悬停时更改背景图像答案

【问题标题】：Change background image on React component hover在 React 组件悬停时更改背景图像
【发布时间】：2020-09-28 11:59:51
【问题描述】：

当您将鼠标悬停在项目组件上时，我想更改它的背景图像。 img 在数组对象中。我已经从中提取了“naam”和“wat”，但是“悬停并将背景更改为 img 图像”部分我不明白。

我需要做什么才能完成这项工作？我无法绕开它。

这是我正在使用的代码：

import React from 'react';
import './projectenoverzicht.scss';
import { Link } from 'react-router-dom';
import { ProjectenLijst } from './../../../data';
import { Grid } from '@material-ui/core';
import Sectiekopje from '../Sectiekopje/Sectiekopje';

const Projectenoverzicht = () => {
  const Project = ({ naam, wat }) => {

    const ProjectNaam = () => (
      <div className='project_kader_banner'>
        <p className='project-kader-banner__titel'>{naam}</p>
        <p className='project-kader-banner__wat'>{wat}</p>
      </div>
    );

    return (
      <div className='project-kader'>
        <ProjectNaam />
      </div>
    )
  }

  return (
    <>
      <Sectiekopje kop='Projecten' />
      <Grid container spacing={2} className='home-projecten-overzicht'>
        <Grid item xs={12} md={3}>
          <Link to='/projecten#project1' className='link'>
            <Project naam={ProjectenLijst[0].naam} img={ProjectenLijst[0].img} wat={ProjectenLijst[0].wat} />
          </Link>
        </Grid>
        <Grid item xs={12} md={3}>
          <Link to='/projecten#project2' className='link'>
            <Project naam={ProjectenLijst[1].naam} img={ProjectenLijst[1].img} wat={ProjectenLijst[1].wat} />
          </Link>
        </Grid>
        <Grid item xs={12} md={3}>
          <Link to='/projecten#project3' className='link'>
            <Project naam={ProjectenLijst[2].naam} img={ProjectenLijst[2].img} wat={ProjectenLijst[2].wat} />
          </Link>
        </Grid>
        <Grid item xs={12} md={3}>
          <Link to='/projecten#music-player' className='link'>
            <Project naam={ProjectenLijst[3].naam} img={ProjectenLijst[3].img} wat={ProjectenLijst[3].wat} />
          </Link>
        </Grid>
      </Grid>
    </>
  )
}

export default Projectenoverzicht;

【问题讨论】：

这能回答你的问题吗？ react js onMouseEnter change image
嗯，我认为我的情况有些不同。我目前有一个 CSS 类来设置项目的背景颜色。所以当我悬停时，我想用图像覆盖它，并在鼠标离开项目div后返回背景颜色。

标签： javascript css reactjs

【解决方案1】：

我不明白，你想为哪个组件改变你的背景，但一般来说：

const imgs = ['imgOffHover.png', 'imgOnHover.png']

ImageDiv = () => {
   [bcgImg, setBcgImg] = useState(imgs[0])

return (
   <div 
      onMouseEnter={() => setBcgImg(imgs[1])}
      onMouseLeave={() => setBcgImg(imgs[0])}
  >
     <img src={bcgImg} alt="bcgImage" />
   </div>
}

【讨论】：

【解决方案2】：

据我所知，您想更改组件背景。我提出了一个解决方案，其工作原理如下：

首先在功能组件中创建一个状态，它将保存您的背景图像值
```
const [BgImg, setBgImg] = useState("")
```

第二步，当有人将鼠标悬停在您的组件上时，将调用鼠标进入和鼠标离开事件。这就是我们将传递背景值的时候。

   <div className='project-kader' 
       onMouseEnter={() => setBgImg("Back ground Image 1 Url")}
       onMouseLeave={()=>setBgImg("Back ground Image 2 Url")} 
 // Your background image value is save 
 // Now pass it to inline styles to change background
       style={{backgroundImage: "url(" + BgImg + ")",height:'500px'}}
       >
        <ProjectNaam />
     </div>

【讨论】：

谢谢！这有效:-) 但初始背景是背景颜色。所以内联样式必须不同，因为这个假设组件加载时有背景图片。

【解决方案3】：

您可以使用 css 代替 JSX 事件，例如 answer

你可以在课堂上这样陈述你的背景：

.my-image-class {
 background-image: var(--my-image);
 background-repeat: no-repeat;
 background-position: center;
 &:hover {
 background-image: var(--hover-image);
   transform: scale(1.5);
 }
}

你的 JSX 代码应该是这样的：

<div
  key={index}
  className="my-image-class"
  style={{ '--my-image': `url(path)`; '--hover-image': `url(other-path)` }} 
>

【讨论】：