I would like the ability to hover over a component and have it display with unique CSS characteristics. For instance, if I hover on item A, I only want item A to stand out from the rest.
Currently, I am using this method of changing the element's background image, here is my code:
const StatsIndicators = () => {
const someArray = ['10%', '50%', '60%', '60%']
const [isHovering, setIsHovering] = useState(false)
const [hoverStyle, setHoverStyle] = useState({})
const [index, setIndex] = useState(0)
const mouseEntered = (index) => {
setIsHovering(true);
setIndex(index + 1);
}
const mouseLeft = () => setIsHovering(false)
useEffect(() => {
if (isHovering) {
setHoverStyle({
background: `center url("/images/stats/rounded-images/${index}.png") no-repeat`,
border: '1px solid #f5f5f5',
boxShadow: '0px 0px 10px #f5f5f5',
transition: 'all 0.3s ease-in-out'
});
} else {
setHoverStyle({});
}
}, [isHovering]);
return (
<>
{<Grid container className={style.test}>
{
someArray.map((item, index) => (
<Grid item xs={12} md={3} key={index}>
<div className={style.statsContainer}>
<div className={style.circle} style={hoverStyle} onMouseEnter={(e) => { mouseEntered(index) }} onMouseLeave={mouseLeft}>
<p className={style.circleStats}>Some value</p>
<p className={`${style.circleStats} ${style.circleStatsDescription}`}>Ver más</p>
</div>
<p className={style.indicator}>Some name</p>
</div>
</Grid>
))
}
</Grid>}
</>
)
}
Upon hovering over an item in the map, I get the following result:
I want to avoid displaying the background image on the other circles, but I'm unsure how to display it only on the hovered one. I thought about comparing the index of the hovered item and only displaying the background if that one is active...but I can't decide on the best way to implement this.