React js：使用 onMouseOver 更改 Div 上的图像

Question

我需要你的帮助:)（但首先，抱歉我的英语很差...）。

当我将鼠标移到 'a' 应答器之一上时，我想更改 'div-img' 中的 'img src' ...我尝试 onMouseOver，但我失败了:(

有一张 'a' 的图片替换了 'div-img'

中的图片

编辑：好的，这是几乎完整的代码，真正看到问题了：

@observer
export default class Home extends React.Component {
  static readonly language = "language";
  private static readonly en = "en";
  private static readonly fr = "fr";

  @observable private static selectLanguage = false;

  public render(): ReactElement {
    if (Home.selectLanguage) {
      return (
        <div style={{ height: '100vh', width: '100vw', overflow: 'hidden'}}>
          <MyHead />
          <body style={{backgroundColor: 'rgb(51, 63, 72)'}}>
            <div style={{ 
              maxWidth: '1150px',
              height: '300px',
              margin: 'auto',
             }}>
               <div style={{ display: 'flex', maxWidth: '450px'}}>
                <img style={{
                  maxWidth: '100%',
                  margin: 'auto'
                }}
                src='/images/***.png'/>
               </div>
            </div>

            <div style={{
              display: 'flex',
              flexWrap: 'wrap',
              position: 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              zIndex: 1,
              }}>

              <a href="/fr/" onClick={_ => { localStorage.setItem(Home.language, Home.fr); }} >
                <span className= 'shadow'>
                  <div style={{ margin: '0 15px', padding: '75px', backgroundColor: 'rgb(175, 39, 47)', clipPath: 'polygon(0 0, 100% 8%, 100% 92%, 0 100%)'}} >  
                    <h2>Français</h2>
                  </div>
                </span>
              </a>

              <a href="/en/" onClick={_ => {localStorage.setItem(Home.language, Home.en);}}>
                <span className= 'shadow'>
                  <div style={{ margin: '0 15px', padding: '75px', backgroundColor: 'rgb(175, 39, 47)', clipPath: 'polygon(0 8%, 100% 0, 100% 100%, 0 92%)'}}>
                    <h2>English</h2>
                  </div>
                </span>
              </a>

            </div>

            <main style={{filter: 'blur(4px)'}}>
              <component1 />
              <component2 />
            </main>

          </body>
        </div>
      )
    }

非常感谢您！

Answer 1

我对你的代码做了一些修改，首先，我使用 mouseOnEnter 而不是 mouseOnHover 并且我还添加了 mouseOnLeave 来重置图像（因为在问题中你提到你想改变当您越过 (Link) 标签时的图像。

我的解决方案使用 useState 反应挂钩，div 的 onMouseEnter 使用

设置随机图像

https://i.picsum.photos/id/${Math.floor(Math.random() * 1084)}/50/50.jpg

https://i.picsum.photos/id/{image_id}/{width}/{height}.jpg

https://i.picsum.photos/id/50/50/50.jpg

OnMouseEnter 状态更新为图像 src/location 并重置为“onMouseLeave”。另外，我添加了

style={{ width: '50px', height: '50px' }}

到 div 以防止 div 在示例代码中悬停在链接上时四处移动。 50px也是图片的高度。

import React, { useState } from 'react'

const testCode = () => {
const [image, setImage] = useState('')
return (
    <>
      <div className="div-img" style={{ width: '50px', height: '50px' }}>
        <img src={image} />
      </div>
      <div>
        <a href="/fr/" onMouseEnter={() => setImage(`https://i.picsum.photos/id/${Math.floor(Math.random() * 1084)}/50/50.jpg`)} onMouseLeave={() => setImage('')}>
          <span className="shadow">
            <div>
              <h2>Lorem</h2>
            </div>
          </span>
        </a>
        <a href="/en/" onMouseEnter={() => setImage(`https://i.picsum.photos/id/${Math.floor(Math.random() * 1084)}/50/50.jpg`)} onMouseLeave={() => setImage('')}>
          <span className="shadow">
            <div>
              <h2>Lorem</h2>
            </div>
          </span>
        </a>
      </div>
    </>
  )
}

export default testCode

更新：使用 React Class

import React, { Component } from 'react'

class sampleCode extends Component {

  constructor(props) {
    super(props);
    this.state = { image: '' };
  }

  setImage = (imagePath) => {
    this.setState({ image : imagePath })
  }

  render() {
    return (
      <>
        <div className="div-img" style={{ width: '50px', height: '50px' }}>
          <img src={this.state.image}/>
        </div>
        <div>
          <a href="/fr/"
             onMouseEnter={() => this.setImage(`https://i.picsum.photos/id/${Math.floor(Math.random() * 1084)}/50/50.jpg`)}
             onMouseLeave={() => this.setImage('')}>
          <span className="shadow">
            <div>
              <h2>Lorem</h2>
            </div>
          </span>
          </a>
          <a href="/en/"
             onMouseEnter={() => this.setImage(`https://i.picsum.photos/id/${Math.floor(Math.random() * 1084)}/50/50.jpg`)}
             onMouseLeave={() => this.setImage('')}>
          <span className="shadow">
            <div>
              <h2>Lorem</h2>
            </div>
          </span>
          </a>
        </div>
      </>
    )
  }
}

export default sampleCode

希望这对您有所帮助:)

React js：使用 onMouseOver 更改 Div 上的图像

React js : Change img on Div whith onMouseOver

hover

onmouseover

reactjs