僅當鼠標懸停在顏色上時，如何顯示按鈕？

Question

我想在特定顏色上顯示 hover 后的按鈕。 但是，發生的情況是，將鼠標懸停在一種顏色上也會顯示相同產品的其他 colors 的按鈕。 此外，按鈕位於左側部分，所以如果我將 hover 到 go 到左側，按鈕將不再出現。 這就是發生的事情：

[![在此處輸入圖像描述][1]][1]

Answer 1

如果您想要一些簡單的東西，您可以使用：hover css 選擇器。

1. 將 class 添加到 js 文件中的元素

   <div className="color-choice" key={i}>

2. 在 css 文件中使用：hover 選擇器

   .color-choice:hover 按鈕 { 顯示：塊； }

   .顏色選擇按鈕{顯示：無； }

Answer 2

您將需要使用元素索引。

我們需要獲取懸停元素的索引，而不是顯示：

const [displayIndex, setDisplayIndex] = useState({
  typeIndex: -1,
  colorIndex: -1
});

並且事件函數可能如下所示：

  const showButton = (typeIndex, colorIndex) => {
   // e.preventDefault();
   setDisplayIndex({
     typeIndex,
     colorIndex
   });
  };

 const hideButton = () => {
   // e.preventDefault();
   setDisplayIndex({
    typeIndex: -1,
     colorIndex: -1
   });
 }; 

以及返回檢查 displayIndex 的按鈕元素的意願

 {
   displayIndex.typeIndex === index 
   &&
   displayIndex.colorIndex === i 
   &&
   (<Button ....>Add</Button>
 }

在您的沙箱鏈接https://codesandbox.io/s/add-to-cart-sampled-2-forked-9oi1kn?file=/src/App.js上進行了此修改，您可能需要在那里修復一些樣式。

希望您覺得這個有幫助。