使用css在ReactJS中悬停另一个图像来隐藏图像

Question

我有下面的反应码。

我的代码

我想要的是，当我悬停第一张图像时，比其他图像应该隐藏(或者变得透明，这样定位就不会崩溃)。

А和其他图片也是如此，例如，如果你在第三张图片上悬停，那么第一张、第二张和第四张图片应该变得隐藏或透明。

我关注的其他主题如下：

在一个元素悬停时如何影响其他元素和另一个元素悬停时隐藏元素，但是我不能修复我的代码。

也许用一些reactJS代码来修复会更容易呢？

请帮帮我。

Answer 1

我会这样做：

跟踪悬停项的索引，并根据该悬停索引更改样式不透明度。

// 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:

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

您可以使用现有的bgImg状态推断哪个是可见的。

如果你把它当作道具传递给SolutionBox，就像

<SolutionBox bgImage={bgImage} onBGChanged={onBGChanged} />

然后对每个SolutionItem

<SolutionItem
  solutionIMG={Ecommerce}
  visible={bgImage === Ecommerce}
  onHover={state => {
    callBGChanged(state === true ? "Ecommerce" : "default");
  }}
/>

并使用它在SolutionItem中进行样式设计。

<div className="solutions-section-item-box" style={{ opacity: visible ? 1 : 0.5}}>