我需要你的帮助 :) 但首先，对不起，我的近似英语...）。
我想改变'img src'在'div-img'中的'div-img'，当我通过鼠标在'a'balise之一...... 我尝试onMouseOver，但我失败了:(
有一个图像由'a'取代'div-img'中的一个。
EDIT : 好吧，这里是几乎完整的代码，以真正看到问题。
@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>
)
}
非常感谢您的帮助!
我对你的代码做了一些修改，首先，我使用mouseOnEnter来代替mouseOnHover，我还添加了mouseOnLeave来重置图像（因为在问题中你提到当你通过(Link)标签时，你想改变图像。
我的解决方案使用了useState react钩子，onMouseEnter为div设置了一个随机图像，使用了
https:/i.picsum.photosid。${Math.floor(Math.random() * 1084)}5050.jpg
https:/i.picsum.photosid。{image_id}{width}{height}.jpg
OnMouseEnter的状态被更新到图像的Src位置，并被重置为'' 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类
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
希望能帮到你:)