hide images by hovering another image in ReactJS using css

Question

I have following react 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.

score 1 · Accepted Answer · answered Jul 01 '20 at 14:03

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;

Thank you, it work for me as you show in your solution. https://codesandbox.io/s/hopeful-lederberg-1ktx6 — Vardan Hambardzumyan, Jul 01 '20 at 14:21

score 0 · Answer 2 · answered Jul 01 '20 at 14:04

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}}>

hide images by hovering another image in ReactJS using css

2 Answers2