CODEWITHSUNDEEP
reactjshover
Jin
Jin

Reputation: 1439

Change image when hover in Reactjs

I'm practicing Reactjs, I'm currently working on hover for icons But I have an error when hovering is that the image cannot be displayed This is my code index.js

import React from 'react';
import '../contact/index.css';
enter code here`import {Row, Col, Image} from 'react-bootstrap';

import PhoneIcon from '../../../assets/icon/phone.png';
import EmailIcon from '../../../assets/icon/mail.png';
import LocationIcon from '../../../assets/icon/location.png';
import FBIcon from '../../../assets/icon/facebook.png';
import YoutubeIcon from '../../../assets/icon/youtube.png';
import GoogleIcon from '../../../assets/icon/google.png';
import FBHover from '../../../assets/icon/fb-hover.png';
import YoutubeHover from '../../../assets/icon/YTHover.png';
import GoogleHover from '../../../assets/icon/google-hover.png';

const Contact = () => {
    return (
      <Col className="fc-item">
        <h4 className="fc-title">Contact</h4>
        <div className="fc-description">
          <p>
            <Image className="contact-icon mail" src = {EmailIcon}/>
            [email protected]
          </p>

          <p>
            <Image className="contact-icon location" src = {LocationIcon}/> 
            101B Le Huu Trac, Son Tra
          </p>

          <p>
            <Image className="contact-icon phone" src = {PhoneIcon}/> 
            (+84) 336 492 501
          </p>

          <p>
            <Image className="social-icon" src = {FBIcon}
              onMouseOver={e => (e.currentTarget.src = {FBHover})}
              onMouseOut={e => (e.currentTarget.src = {FBIcon})} 
            />
            <Image className="social-icon mg" src = {YoutubeIcon}
              onMouseOver={e => (e.currentTarget.src = {YoutubeHover})}
              onMouseOut={e => (e.currentTarget.src = {YoutubeIcon})} 
            />
            <Image className="social-icon" src = {GoogleIcon}
              onMouseOver={e => (e.currentTarget.src = {GoogleHover})}
              onMouseOut={e => (e.currentTarget.src = {GoogleIcon})} 
            />
          </p>
        </div>
      </Col>
    );
  }
  
  export default Contact

And this is an error when I hover enter image description here

I need your help,Thanks for spend your time to see my question

Upvotes: 2

Views: 5578

Answers (1)

Jacek Rojek
Jacek Rojek

Reputation: 1122

try changing it by removing unnecessary brackets:

onMouseOver={e => (e.currentTarget.src = {GoogleHover})}

to:

onMouseOver={e => e.currentTarget.src = GoogleHover}

Upvotes: 6

Related Questions