onClick 事件可以处理 onMouseEnter 事件吗？

Question

so I have a bunch of logos displayed on the right side of a div and an information card on the left.

every logo when hovered makes the card display specific info. I'm trying to make a function where when the logo is clicked instead of just hovered, will make the card stick to the info from the logo they clicked on.

this issue appears from the fact that some people use the cursor to read. so if the user is on the far right on the screen and is trying to see the info from one of those logos, it will try to go back to the card to read the info and will accidentally change it because of the onMouseEnter event, making it a bad user experience for them.

I have been trying to figure this one out, might not be asking google correctly, hope you guys can understand what I'm asking.

thank you in advance!

import React, { useState } from "react";
import { imgrep } from "../../Helper/imgrep";
import styled from "styled-components";
import "react-circular-progressbar/dist/styles.css";
import Cards from "./Cards";
import { FaRegEye, VscGraphLine, BsFileEarmarkText, FaGitAlt, IoRocketSharp, SiFastapi } from 'react-icons/all';
import { memerep } from "../../Helper/memes";
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';



const ShowAndHide = ( ) => {
  
  const professions = [
    {
      circular: <CircularProgressbar value= "99" text={`99%`} 
      styles={buildStyles({
       // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
       strokeLinecap: 'butt',
       // Text size
       textSize: '16px',
       // How long animation takes to go from one percentage to another, in seconds
       pathTransitionDuration: 1.5,
       // Colors
       pathColor: `rgba(58, 123, 213, ${99 / 100})`,
       textColor: '#102647',
       trailColor: '#e0e0eb',
       backgroundColor: '#3e98c7',
     })}
     /> ,
      git:<FaGitAlt/>,
      industrycon: <IoRocketSharp alt="Space Rocket"/> ,
      key: "card1",
      meme: <img src={memerep(0)} className="memes"/>,
      project:"PROYECTOlola",
      icon: <FaRegEye alt="Computer-vision-logo" />,
      percentage: 99,
      specialty: "CV",
      industry:"Gases Clinicos",
      summary:"Compliance del 99% de normas sanitarias para operación en pandemia , identifiacando dist. social, aforo y mascarilla.",
      logo: <img className="Mediumsquare" src={imgrep(1)} alt="altofem" />
    },


    { 
      circular: <CircularProgressbar value= "98" text={`98%`} 
      styles={buildStyles({
       // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
       strokeLinecap: 'butt',
       // Text size
       textSize: '16px',
       // How long animation takes to go from one percentage to another, in seconds
       pathTransitionDuration: 1.5,
       // Colors
       pathColor: `rgba(58, 123, 213, ${98 / 100})`,
       textColor: '#102647',
       trailColor: '#e0e0eb',
       backgroundColor: '#3e98c7',
     })}
     /> ,
      key: "card2",
      industrycon: <IoRocketSharp alt="Space Rocket"/>,
      git:<FaGitAlt/>,
      project:"PROYECTO",
      icon: <VscGraphLine alt="Data-analytics-logo"/>,
      specialty: "NPL",
      industry: "inmobiliaria",
      summary: "Un proyecto Vimac es la garantía de un diseño bien pensado, una arquitectura de tradición basada en principios sólidos, que busca otorgar hogares de calidad que se adaptan a un estilo de vida contemporáneo.",
      logo: <img className="Biground" src={imgrep(2)} alt="vimac" />,
    },


    {
      circular: <CircularProgressbar value= "97" text={`97%`} 
      styles={buildStyles({
       // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
       strokeLinecap: 'butt',
       // Text size
       textSize: '16px',
       // How long animation takes to go from one nother, in seconds
       pathTransitionDuration: 1.5,
       // Colors
       pathColor: `rgba(58, 123, 213, ${97 / 100})`,
       textColor: '#102647',
       trailColor: '#e0e0eb',
       backgroundColor: '#3e98c7',
     })}
     /> ,
      key: "card3",
      industrycon: <IoRocketSharp alt="Space Rocket"/>,
      git:<FaGitAlt/>,
      project:"PROYECTO",
      icon:<BsFileEarmarkText alt="Natural-language-processing-logo"/> ,
      specialty: "NLP",
      industry: "RRHH",
      summary:"Ahorro de alrededor un 96% de tiempo empleado para diagnóstico de CV's.",
      logo: <img  className="Mediumsquare" src={imgrep(3)} alt="peopleparnerts" />,
    },


    { 
      circular: <CircularProgressbar value= "96" text={`96%`} 
      styles={buildStyles({
       // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
       strokeLinecap: 'butt',
       // Text size
       textSize: '16px',
       // How long animation takes to go from one nother, in seconds
       pathTransitionDuration: 1.5,
       // Colors
       pathColor: `rgba(58, 123, 213, ${96 / 100})`,
       textColor: '#102647',
       trailColor: '#e0e0eb',
       backgroundColor: '#3e98c7',
     })}
     /> ,
      key: "card4",
      industrycon: <IoRocketSharp alt="Space Rocket"/>,
      git:<FaGitAlt/>,
      project:"PROYECTO",
      icon: <SiFastapi alt="API"/>,
      specialty: "cv",
      industry: "Big Data",
      summary: "Para entregar las soluciones que nuestros clientes necesitan, hemos establecido alianzas con destacadas empresas e instituciones de tecnología o educación superior.",
      logo: <img width="" className="Mediumsquare" src={imgrep(4)} alt="uplanner" />
    }
  ];
  
  
  const [myProfession, setMyProfession] = useState("");
  const[clickStatus, setClickStatus]= useState(false);
 

  if (clickStatus === true) {
    console.log("clicked")
    
  }
  else if(clickStatus === false){
    console.log("not clicked");
  }
   return (

     <>
      {/* INFORMATION CARDS */}
      <Container> 
        <LeftSide>
          <Bottom>
            {professions &&(
          <Cards 
          circular={myProfession.circular}
          project={myProfession.project}
          icon={myProfession.icon}
          percentage={myProfession.percentage} 
          specialty= {myProfession.specialty}
          industry={myProfession.industry}
          summary={myProfession.summary}
          git={myProfession.git}
          industrycon={myProfession.industrycon}
           />       
            )}    
            
            {professions.map((profession) => ( 
              <info
              circular={profession.circular}
              project={profession.project}
              icon={profession.icon}
              git={profession.git}
              industrycon={profession.industrycon}
              percentage={profession.percentage}
              specialty={profession.specialty}
              industry={profession.industry}
              summary={profession.summary}
              onMouseEnter={() => setMyProfession(profession.logo.props.alt)}/>
            ))}
          </Bottom>
        </LeftSide>
        {/* HOVERING LOGOS */}
        <RightSide>
          <h2> - Nuestros Casos de Exito -</h2>
          <br />
          <Buttons>
            {professions.map((profession) => (
              <>
                <img 
                  type="img"
                  key={profession}
                  id={profession.logo.props.id}
                  src={profession.logo.props.src}
                  className={profession.logo.props.className}
                  onMouseEnter={() => setMyProfession(profession)}
                  onClick={()=> setClickStatus(true)}
                  onMouseLeave={()=> setClickStatus(false)}
                ></img>
              </>
            ))}
          </Buttons>
        </RightSide>
      </Container>
    </>
  );
};

export default ShowAndHide;

Answer 1

I hope I understand what you mean.

if you want to add an onClick event to right side logo as you did,

import React, { useState } from "react";
import { imgrep } from "../../Helper/imgrep";
import styled from "styled-components";
import "react-circular-progressbar/dist/styles.css";
import Cards from "./Cards";
import { FaRegEye, VscGraphLine, BsFileEarmarkText, FaGitAlt, IoRocketSharp, SiFastapi } from 'react-icons/all';
import { memerep } from "../../Helper/memes";
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';

  
  const [myProfession, setMyProfession] = useState("");
  const[Clicked, setClicked]= useState(false);


  const handleSelectLogo = (e) => {
    logoKey = e.currentTarget.dataset.id; // data-key
    const profession = professions.find(prof => prof.key === logoKey);
    setMyProfession(profession);
    setClicked(true);
  }

  const handleLeaveLogo = (e) => {
      if(Clicked){
        return;
      }
      setMyProfession("")
  }

   return (

     <>
      {/* INFORMATION CARDS */}
      <Container> 
        <LeftSide>
          <Bottom>
            {myProfession && (
          <Cards 
          circular={myProfession.circular}
          project={myProfession.project}
          icon={myProfession.icon}
          percentage={myProfession.percentage} 
          specialty= {myProfession.specialty}
          industry={myProfession.industry}
          summary={myProfession.summary}
          git={myProfession.git}
          industrycon={myProfession.industrycon}
           />       
            )}    
            
            {professions.map((profession) => ( 
              <info
              circular={profession.circular}
              project={profession.project}
              icon={profession.icon}
              git={profession.git}
              industrycon={profession.industrycon}
              percentage={profession.percentage}
              specialty={profession.specialty}
              industry={profession.industry}
              summary={profession.summary}
              onMouseEnter={() => setMyProfession(profession.logo.props.alt)}/>
            ))}
          </Bottom>
        </LeftSide>
        {/* HOVERING LOGOS */}
        <RightSide>
          <h2> - Nuestros Casos de Exito -</h2>
          <br />
          <Buttons>
            {professions.map((profession) => (
              <>
                <img 
                  type="img"
                  key={profession}
                  id={profession.logo.props.id}
                  data-key={profession.key}
                  src={profession.logo.props.src}
                  className={profession.logo.props.className}
                  onMouseEnter={() => setMyProfession(profession)}
                  onClick={handleSelectLogo}
                  onMouseLeave={handleLeaveLogo}
                ></img>
              </>
            ))}
          </Buttons>
        </RightSide>
      </Container>
    </>
  );
};

export default ShowAndHide;

you can add a dataset to your dom element like that and you can access that key (or unique value) in your function. I hope I was able to help