在适当的项目上悬停时更改样式答案

【问题标题】：Change styles on hover of an appropriate item在适当的项目上悬停时更改样式
【发布时间】：2023-01-31 21:33:36
【问题描述】：

如何更改悬停在适当项目反应上的样式？现在一次更改所有项目的样式。将鼠标悬停在添加到购物车按钮上，我只需要更改所选的 div 样式。 https://codesandbox.io/s/trusting-moon-djocul?file=/src/components/Category.js**

import React, { useState } from "react";

import styles from "./category.module.css";
import Categories from "./Categories";

const Category = () => {
  const [hovered, setHovered] = useState(false);
  const [data, setData] = useState(Categories);

  const style = hovered
    ? { backgroundColor: "#ffcbcb", color: "#fff", transition: "all 0.5s ease" }
    : {};
  const filterResult = (catItem) => {
    const result = Categories.filter((curData) => curData.category === catItem);

    setData(result);
  };

  return (
    <>
        <div className={styles.items}>
          {data.map((value) => {
            const { id, title, price, description } = value;
            return (
              <>
                <div className={styles.item} key={id} style={style}>
                  <h1>{title}</h1>
                  <p>
                    {price} <span>$</span>
                  </p>
                  <p>{description}</p>
                  <button
                    onMouseEnter={() => setHovered(true)}
                    onMouseLeave={() => setHovered(false)}
                    className={styles.btn}
                  >
                    Add to Cart
                  </button>
                </div>
              </>
          
  );
};

export default Category;

【问题讨论】：

看起来最好只在此处使用 CSS 来完成。也许更新呈现的 HTML 和任何 CSS。

标签： javascript reactjs hover destructuring onmouseover

【解决方案1】：

那是因为您的所有卡片共享一个“悬停”状态，您应该创建一个“卡片”组件并让该组件具有自己的悬停状态

  return (
    <>
        <div className={styles.items}>
          {data.map((value) => {
            return (
              <>
               <Card {...props} />
              </>
          
  );

【讨论】：

【解决方案2】：

问题

出现此问题是因为您将 CSS 应用于所有卡片。您的逻辑中唯一缺少的小东西是将 CSS 添加到唯一一个按钮被悬停的卡片。

解决方案

这可以通过在鼠标进入和鼠标离开事件上使用事件对象来实现。

<div className={styles.item} key={id} style={style}>
  <h1>{title}</h1>
  <p>
    {price} <span>$</span>
  </p>
  <p>{description}</p>
  <button
    onMouseEnter={(e) =>
      e.currentTarget.parentElement.classList.add("active_card")
    }
    onMouseLeave={(e) =>
      e.currentTarget.parentElement.classList.remove("active_card")
    }
    className={styles.btn}
    >
     Add to Cart
 </button>
</div>

这将在“添加到卡片”按钮悬停的卡片上添加一个“active_card”类，然后您可以将所需的样式应用于该类。

.active_card {
  background-color: #ffcbcb !important;
}

例子

Working Code Sandbox Example

【讨论】：