React js:使用 onMouseOver 更改 Div 上的图像
React js : Change img on Div whith onMouseOver
我需要你的帮助:)(但首先,抱歉我的英语很差...)。
当我将鼠标移到 '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>
)
}
非常感谢您!
我对你的代码做了一些修改,首先,我使用 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
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
希望这对您有所帮助:)
我需要你的帮助:)(但首先,抱歉我的英语很差...)。
当我将鼠标移到 '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>
)
}
非常感谢您!
我对你的代码做了一些修改,首先,我使用 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
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
希望这对您有所帮助:)