如何使用useState钩子将悬停事件放在每个列表中?

Question

你好，我想做的悬停事件上的每个列表框，由json文件。每个方框都有图像我想做的是，当鼠标在图像上时。它应该消失。但是当我放入useState钩子时它会应用到每个盒子。我是如何把事件的每一个li框。

partnersIcons.json 
[
{
"image":"../img/1_a.png"
},
{
"image":"../img/1_b.png"
},
{
"image":"../img/1_c.png"
}
]

import React, { useEffect, useState } from 'react';
import styled from "styled-components";
import partnerIcons from './json/partnersIcon.json';
const Icorn = styled.img`
padding:4px;
vertical-align:middle;
display:block;
&.hidden{
display:none;
}
`
const Ul = styled.ul`
width:75%;
display:grid;
grid-template-columns:190px 190px 190px 190px 190px; 
margin: 0 auto;
@media ${({ theme }) => theme.device.tablet} {
display:none;

}
`
const Wrap =()=>{
const [visible, setVisible] = useState(false);  
const pIcornWrap = partnerIcons.map((item, index)=>{
return(
<Li key={index}>
<Icorn src ={item.image} onMouseOver={()=>{setVisible(!visible);}} onMouseDown={()=>{setVisible(!visible);}} className={visible? 'show':'hidden'}></Icorn>
</Li>
)
});
return(
<div>

<Ul>
{pIcornWrap}
</Ul>
<MobileView><PartnersPage/></MobileView>
</div>
)

}

Answer 1

直接使用css

li.className img:hover {
display:none;
}