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

Posted 2023-02-19

【中文标题】将鼠标悬停在 X 上时，如何仅在单个列表中显示 X？

【英文标题】：How can I display the X only in single list when I hover on it?

【发布时间】：2021-11-23 15:51:28

【问题描述】：

当我将鼠标悬停在单个列表中时，我遇到了问题。当我悬停它时，我只想在一个列表上显示 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;

【问题讨论】：

这有帮助吗？ ***.com/questions/5210033/…

不，这没有帮助

【参考方案1】：

在每个项目中你应该有over 状态，并且它不应该被所有项目共享。我是这样写的：

// import React from "react";
// import "./list.css";

const items = [
   id: 1, amount: 50000, itemName: "Salary" ,
   id: 2, amount: -500, itemName: "Gym" ,
   id: 3, amount: -5000, itemName: "Bill" ,
];

const List = () => 
  return (
    <ul>
      items.map((item) => (
        <ListItem key=item.id item=item />
      ))
    </ul>
  );


// export default List;

const ListItem = ( item ) => 
  const [over, setOver] = React.useState(false);

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

  return (
    <li
      onMouseOver=mouseOver
      onMouseOut=mouseOver
      style=
        border: "1px solid black",
        borderRight: `5px solid $item.amount < 0 ? "red" : "green"`,
      
      className="item-name"
    >
      <p>item.itemName</p>
      <p>item.amount</p>
      <p style= display: over ? "block" : "none" >X</p>
    </li>
  );
;


ReactDOM.render(<List />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：

不客气，如果对你有用，请将答案标记为正确，谢谢！

【参考方案2】：

您正面临这个问题，因为所有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>

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