我如何仅使用NextJS激活样式属性以悬停组件？

Question

我希望能够悬停一些组件并具有特殊的CSS特征。因此，例如，如果我徘徊在项目A上，我只希望将项目A与其他项目区分开。

现在，我有这种方法更改元素背景图像，这是我的代码：

const StatsIndicadores = () => {

    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.indicador}>Some name</p>
                            </div>
                        </Grid>
                    ))
                }
            </Grid>}
        </>
    )
}

当我徘徊在地图中的某些项目上时，这就是我得到的：

我不想在其他圆圈上显示背景图像，但我不知道如何仅在悬停的一个圆圈上显示它。 我有想法比较盘旋项目的索引，如果该项目活跃，请显示背景...但是我不知道这样做是最好的。

Answer 1

截至目前，当其中一个盘旋时，您将这些样式应用于所有圆圈。您需要根据活动盘旋圆圈有条件地应用样式（您可以使用任何独特的属性 - 在下面的示例中，我使用了ID）。

演示代码：

​

import { useState } from "react";
import "./styles.css";

const data = [
  {
    id: 1,
    url: "https://images.dog.ceo/breeds/terrier-american/n02093428_3305.jpg"
  },
  {
    id: 2,
    url: "https://images.dog.ceo/breeds/terrier-american/n02093428_10245.jpg"
  },
  {
    id: 3,
    url: "https://images.dog.ceo/breeds/terrier-american/n02093428_1345.jpg"
  },
  {
    id: 4,
    url: "https://images.dog.ceo/breeds/terrier-american/n02093428_10947.jpg"
  },
  {
    id: 5,
    url: "https://images.dog.ceo/breeds/terrier-american/n02093428_5331.jpg"
  }
];

export default function App() {
  const [activeId, setActiveId] = useState(0);

  const setActiveElementOnHover = (id) => {
    setActiveId(id);
  };

  const resetActiveElementOnLeave = () => {
    setActiveId(0);
  };

  return (
    <div className="app">
      <h1 className="headline">Dog Gallery</h1>
      <div className="gallery-container">
        {data.map(({ id, url }) => (
          <div
            key={id}
            role="presentation"
            className="circle"
            style={{
              background:
                activeId === id ? `center / cover no-repeat url(${url})` : ""
            }}
            onMouseEnter={() => setActiveElementOnHover(id)}
            onMouseLeave={resetActiveElementOnLeave}
          >
            <p>Dog #{id}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

​

.app {
  font-family: sans-serif;
  text-align: center;
}

.gallery-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 800px;
  margin: 0 auto;
}

.circle {
  padding: 75px;
  border-radius: 50%;
  background: navy;
  color: white;
  margin: 0 10px;
}

.headline {
  font-size: 10rem;
  color: navy;
}

p {
  padding: 0;
  margin: 0;
}