当我将鼠标悬停在它上面时，如何仅在单个列表中显示 X？

穆罕默德·奥萨马

当我要在单个列表中悬停时，我正面临这个问题。当我悬停它时，我只想在单个列表上显示 X。但是当我将鼠标悬停在一个时，它会显示在所有内容中。

import React from "react";
import { useState } from "react/cjs/react.development";
import "./list.css";

function List({ items }) {
  const [over, setOver] = useState(false);

  const mouseOver = () => {
    setOver(!over);
  };

  return (
    <ul>
      {items.map((item, i) => {
        return (
          <>
            <li
              onMouseOver={mouseOver}
              onMouseOut={mouseOver}
              style={{
                borderRight: `5px solid ${item.amount < 0 ? "red" : "green"}`,
              }}
              key={i}
              className="item-name"
            >
              <p>{item.itemName}</p>
              <p>{item.amount}</p>
              <p style={{ display: over ? "block" : "none" }}>X</p>
            </li>
          </>
        );
      })}
    </ul>
  );
}

export default List;

沙赫里亚尔

您面临这个问题是因为所有lis 共享相同的over状态。您要么需要以某种方式为每个组件定义一个状态，要么为此使用纯 css - 这是我更喜欢的方法：

纯 CSS 方法：

.item-name .the-x {
  display: none;
}

.item-name:hover .the-x {
  display: block;
}

并将 X 部分更改为：

<li
    onMouseOver={mouseOver} /* remove this */
    onMouseOut={mouseOver}  /* remove this */
    ...
>
    ...
    <p style={{ display: over ? "block" : "none" }}>X</p> /* remove this */
    <p className="the-x">X</p> /* use this */
    ...
</li>

而不是display: none/block您可以使用opacity:0/1或visibility:hidden/visible。使用您喜欢的任何 CSS 属性

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。