正文 

当前位置： 首页 > 源码 >

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

     2023-02-19     72

关键词：

【中文标题】将鼠标悬停在 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 属性

【讨论】：

当鼠标悬停在 MFC C++ 中列表控件的列标题上时显示工具提示

】当鼠标悬停在MFCC++中列表控件的列标题上时显示工具提示【英文标题】：DisplayToolTipwhenmousehoveronColumnHeaderofListControlinMFCC++【发布时间】：2017-07-2611:34:45【问题描述】：我有一个场景，当我将鼠标悬停在MFCC++中列表控件的列标题... 查看详情

悬停在列表项上时更改背景图像

...在这个列表的div有一个背景图像。我想要做的是每当我将鼠标。请注意，每个项目都应将背景更改为不同的图像。我该怎么做呢？我只找到了如何更改为单个而不是多个图像的答案。这是屏幕截图。我已经将鼠标悬停 查看详情

在 HTML 中，如何在将鼠标悬停在文本上时显示图像？

】在HTML中，如何在将鼠标悬停在文本上时显示图像？【英文标题】：InHTML,howcanyoumakeanimageappearwhileyouarehoveringovertext?【发布时间】：2015-03-0418:50:10【问题描述】：在HTML中，当我将鼠标悬停在特定文本部分上时，如何使图像出现（... 查看详情

将鼠标悬停在列表上时如何更改锚点颜色

】将鼠标悬停在列表上时如何更改锚点颜色【英文标题】：Howtochangeanchorcolorwhenyouhoveroveralist【发布时间】：2011-05-2011:43:39【问题描述】：我有以下HTML和CSS。当我将鼠标悬停在列表上时，我想更改背景颜色和字体颜色。但是，当... 查看详情

如何在 matplotlib 中控制鼠标悬停文本

】如何在matplotlib中控制鼠标悬停文本【英文标题】：Howtocontrolmouseovertextinmatplotlib【发布时间】：2018-03-1320:42:27【问题描述】：当您将鼠标悬停在使用imshow显示的图像上时，您可以将鼠标悬停在图像上以检查其RGB值。matplotlib窗口... 查看详情

将鼠标悬停在图片上时如何在 tumblr 上显示标签？ [关闭]

】将鼠标悬停在图片上时如何在tumblr上显示标签？[关闭]【英文标题】：Howtoshowtagsontumblrwhenyouhoveroverapicture?[closed]【发布时间】：2013-05-0904:51:34【问题描述】：我得到了这个新主题(http://soeststhemes.tumblr.com/casual)，但不幸的是它没... 查看详情

将鼠标悬停在 iframe 上时如何显示文本

】将鼠标悬停在iframe上时如何显示文本【英文标题】：Howtodisplaytextwhenhoveroveraniframe【发布时间】：2022-01-2110:53:15【问题描述】：我是新来的，首先要问一个特殊的问题：当用鼠标悬停在iframe上时，应该会出现一个带有文本的透... 查看详情

当用户将鼠标悬停在列表项上时，如何将光标变为手形？

】当用户将鼠标悬停在列表项上时，如何将光标变为手形？【英文标题】：Howtochangethecursorintoahandwhenauserhoversoveralistitem?【发布时间】：2011-03-0612:04:40【问题描述】：我有一个列表，并且我有一个用于其项目的点击处理程序：<u... 查看详情

将鼠标悬停在href上时如何显示文本

】将鼠标悬停在href上时如何显示文本【英文标题】：Howtomaketextappearwhenhoveroverahref【发布时间】：2015-06-0615:29:41【问题描述】：如何让文本显示在链接下？<divclass="login"><ahref="">Login<p>Accessyourprofilehere</p></a>&l... 查看详情

将鼠标悬停在列表上时更改列表中每个链接的颜色

】将鼠标悬停在列表上时更改列表中每个链接的颜色【英文标题】：changethecolorofaeverylinkinalistwhenhoveringoverone【发布时间】：2012-02-2214:27:22【问题描述】：这是一个示例列表：<ul><li><ahref="#">Link1</a></li><li&g... 查看详情

如何将弹出窗口添加到折线中，当鼠标悬停在地图上的折线上时显示传单

】如何将弹出窗口添加到折线中，当鼠标悬停在地图上的折线上时显示传单【英文标题】：Howtoaddapopuptoapolylinethatwilldisplaywhehoveringoverapolylineonmapforleaflet【发布时间】：2021-12-1107:28:00【问题描述】：我在地图上画了一些折线，我... 查看详情

使用 ng-repeat 将鼠标悬停在表格中的文本上时显示图像

】使用ng-repeat将鼠标悬停在表格中的文本上时显示图像【英文标题】：Displayimagewhenhoverovertextintableusingng-repeat【发布时间】：2017-08-0701:03:43【问题描述】：我正在练习angularJS构建一个简单的库存应用程序。我有一个包含产品列表... 查看详情

仅在将鼠标悬停在圆圈上时才沿文本路径为 SVG 文本设置动画

】仅在将鼠标悬停在圆圈上时才沿文本路径为SVG文本设置动画【英文标题】：AnimateSVGtextalongatext-pathonlywhenhoveringoveracircle【发布时间】：2018-06-2908:56:11【问题描述】：我想将动画从HTML移动到css。仅当您将鼠标悬停在&lt;circleid=&... 查看详情

将鼠标悬停在按钮上时仅更改部分文本

】将鼠标悬停在按钮上时仅更改部分文本【英文标题】：onlypartialtextchangeonhoveroverbutton【发布时间】：2013-09-1811:06:24【问题描述】：当鼠标悬停在按钮上时，我希望按钮中文本的字体颜色变为白色且不带下划线。目前，文本颜色... 查看详情

当我使用 jquery 将鼠标悬停在图标上时如何显示一个简单的文本框

】当我使用jquery将鼠标悬停在图标上时如何显示一个简单的文本框【英文标题】：HowtoshowasimpletextboxwhenIhoveroveraniconusingjquery【发布时间】：2012-07-3116:08:19【问题描述】：我在html中有一个输入字段，该字段旁边有一个帮助图标(?)... 查看详情

将鼠标悬停在 ASP.NET 按钮上时显示注释

】将鼠标悬停在ASP.NET按钮上时显示注释【英文标题】：DisplaynoteswhenhoveringoverASP.NETbuttons【发布时间】：2012-10-0602:37:11【问题描述】：我的页面上有许多按钮，我希望在其旁边显示一些注释，说明当它们悬停在任何特定按钮上时... 查看详情

将鼠标悬停在 li 上时如何更改所有字体颜色

】将鼠标悬停在li上时如何更改所有字体颜色【英文标题】：Howtochangeallfontcolorwhenhoveringoveranli【发布时间】：2014-01-0708:00:12【问题描述】：我试图做到这一点，当我将鼠标悬停在一个列表元素（它是一个矩形）上时，里面的所有... 查看详情

将鼠标悬停在javascript和/或css列表中的相应单词时，如何显示不同的图像？

我有一个“系列”列表，当用户将鼠标悬停在列表中的系列名称上时，我想要一个连接到所述系列的图像弹出。我也希望它弹出transition的.5s。我已经遇到了一个问题22，如果我在CSS中使用悬停效果并从display:none;->display:block;我... 查看详情