How do I change an image on hover
in JSX
I'm trying something like this:
<img src={require('../../../common/assets/network-inactive.png')}
onMouseOver={this.src = require('../../../common/assets/network.png')}
onMouseOut={this.src = require('../../../common/assets/network-inactive.png')} />
I will assume you are writing this code in a React component. Such as:
class Welcome extends React.Component {
render() {
return (
<img src={require('../../../common/assets/network-inactive.png')}
onMouseOver={this.src = require('../../../common/assets/network.png')}
onMouseOut={this.src = require('../../../common/assets/network-inactive.png')}
/>
);
}
}
Targeting this.src
will not work in this case as you are essentially looking for something named src
in your class. For instance this.src
could find something like this:
src = () => (alert("a source"))
But that is not what you want to do. You want to target the image itself.
Therfore you need to enter the <img />
context. You can do that easily like this:
<img
onMouseOver={e => console.log(e)}
/>
From there you can target the currentTarget
property, among others. This will enter the context of your element. So now you can do something like this:
<img
src="img1"
onMouseOver={e => (e.currentTarget.src = "img2")}
/>
The same can be done for onMouseOut
.
You can use this same method on your other elements, as you will certainly need to do this again. But be careful as this is a not the only solution. On bigger projects you may want to consider using a store ( Redux ), and passing props rather than mutating elements.
Best is to manage this in the state:
class App extends Component {
state = {
img: "https://i.vimeocdn.com/portrait/58832_300x300"
}
render() {
return (
<div style={styles}>
<img
src={this.state.img}
onMouseEnter={() => {
this.setState({
img: "http://www.toptipsclub.com/Images/page-img/keep-calm-and-prepare-for-a-test.png"
})
}}
onMouseOut={() => {
this.setState({
img: "https://i.vimeocdn.com/portrait/58832_300x300"
})
}}
/>
</div>
)
}
};
Here's a non-class approach using a functional component and typescript:
interface IconProps {
src?: string;
srcOnHover?: string;
alt?: string;
}
const Icon: React.FC<IconProps> = ({ src, srcOnHover, alt }) => (
<img
src={src}
alt={alt}
onMouseOver={(e): void => {
srcOnHover && (e.currentTarget.src = srcOnHover);
}}
onMouseOut={(e): void => {
srcOnHover && (e.currentTarget.src = src || '');
}}
/>
);
It can be used like that:
<Icon src="path/to/image.png" srcOnHover="path/to/hover-image.png" alt="Description" />
simple way to do this:
class Home extends React.Component { state = { icon: ICON_ONE }
render(){ return( <img src={this.state.icon} onMouseOver={()=>this.setState({icon:ICON_TWO})}
onMouseOut={() => this.setState({ icon: ICON_ONE })} /> ) }
Another non-class approach:
import arrow from "../images/arrow.svg";
import arrowHover from "../images/arrowHover.svg";
function Arrow() {
const [over, setOver] = useState(false);
return (
<div
onMouseOver={() => setOver(true)}
onMouseOut={() => setOver(false)}
>
<img
src={over ? arrowHover : arrow}
alt="arrow"
width="50"
height="50"
/>
</div>
)
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.