hide images by hovering another image in ReactJS using css - css

Question

I have following react code.
My code
What I would like is to when I hover first image than other image should hide (or become transparent, so that the positioning does not collapse).
Аnd so it would be for other pictures, for example if you make a hover on a third picture, then the first, second and fourth pictures should become hide or transparent.
I look in other topics like:
How to affect other elements when one element is hovered and Hide element on hover of another element but I can't fix my code.
Maybe it will be more easy to fix using some reactJS code?
Please help me.

Answer 1

I would do it like this:
Track the index of hovered item, and changeing the style opacity depending on that hovered index.
// SolutionBox.jsx
import React, { useState } from "react";
import SolutionItem from "./SolutionItem";
import Ecommerce from "../img/a.png";
import Middleware from "../img/b.png";
import SalesMarketing from "../img/c.png";
import Analytics from "../img/d.png";
import _ from "lodash";
function SolutionsSectionBox({ onBGChanged }) {
const [focused, setFocused] = useState(0);
let callBGChanged = menuName => {
if (_.isFunction(onBGChanged)) {
onBGChanged(menuName);
}
};
return (
<div className="solutions-section-box-box">
<SolutionItem
solutionIMG={Ecommerce}
onHover={state => {
setFocused(1);
callBGChanged(state === true ? "Ecommerce" : "default");
}}
focused={focused}
index={1}
onLeave={() => setFocused(0)}
/>
<SolutionItem
solutionIMG={SalesMarketing}
onHover={state => {
setFocused(2);
callBGChanged(state === true ? "SalesMarketing" : "default");
}}
focused={focused}
index={2}
onLeave={() => setFocused(0)}
/>
<SolutionItem
solutionIMG={Analytics}
onHover={state => {
setFocused(3);
callBGChanged(state === true ? "Analytics" : "default");
}}
focused={focused}
index={3}
onLeave={() => setFocused(0)}
/>
<SolutionItem
solutionIMG={Middleware}
onHover={state => {
setFocused(4);
callBGChanged(state === true ? "Middleware" : "default");
}}
focused={focused}
index={4}
onLeave={() => setFocused(0)}
/>
</div>
);
}
export default SolutionsSectionBox;
Solution Item:
// Solution Item:
import React from "react";
import _ from "lodash";
function SolutionsSectionBoxItem({
onLeave,
solutionIMG,
onHover,
index = 0,
focused = 0
}) {
let callOnHover = state => {
if (_.isFunction(onHover)) {
onHover(state);
}
};
return (
<div className="solutions-section-item-box">
<img
style={{
opacity: focused && focused !== index ? 0.5 : 1
}}
src={solutionIMG}
alt=""
onMouseEnter={() => {
callOnHover(true);
}}
onMouseLeave={() => {
callOnHover(false);
onLeave();
}}
className="solutions-section-item-img"
/>
</div>
);
}
export default SolutionsSectionBoxItem;

Answer 2

You can use your existing bgImg state to infer which is visible.
If you pass it as a prop to SolutionBox like
<SolutionBox bgImage={bgImage} onBGChanged={onBGChanged} />
and then for each SolutionItem
<SolutionItem
solutionIMG={Ecommerce}
visible={bgImage === Ecommerce}
onHover={state => {
callBGChanged(state === true ? "Ecommerce" : "default");
}}
/>
and use it to style in SolutionItem
<div className="solutions-section-item-box" style={{ opacity: visible ? 1 : 0.5}}>