如何显示图标可以用光标悬停

     2023-02-21     75

关键词:

【中文标题】如何显示图标可以用光标悬停【英文标题】:How to show icon is hoverable with cursor 【发布时间】:2021-10-02 18:01:27 【问题描述】:

我有一个字体很棒的图标,带有一个 onclick 作为按钮。一切正常,但是当我将鼠标悬停在图标上时,我的鼠标不会从指针变为手指。

我怎样才能实现这种行为?

这是简单的图标实现:

<FontAwesomeIcon
    className='text-white'
    icon=faChevron
    onClick=this.next
    size='lg'
/>

【问题讨论】:

使用光标:指针;属性 【参考方案1】:

一般来说,你可以像这样使用 CSS 来改变鼠标光标:

.text-white 
  cursor: pointer;

还有很多其他变种,见这篇 MDN 文章:https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

【讨论】:

【参考方案2】:

试试

.text-white:hover 
cursor:pointer

【讨论】:

在每行开始处用光标选择多行

...述】:我想选择多行并将光标放在每行的开头。SublimeText可以用Ctrl-Shift-L做到这一点selectmultiplelinesctrl+shift+Landthenputcursoratbeginningofeachline【问题讨论 查看详情

用光标+联合+枢轴查询?

...时间】:2012-10-0115:39:37【问题描述】:我一直试图弄清楚如何解决这个问题,但没有成功。我有2张桌子:1)问题ID(pk)QUESORD2)答案ID(pk)QUES_ID(fk)SURV_ID(fk)ANSW现在我需要创建一个视图,其中问题是列名,对于每个SURV_ID,如果ANSWERS中... 查看详情

悬停时如何显示文本?

】悬停时如何显示文本?【英文标题】:Howtoshowatextwhenhovering?【发布时间】:2014-03-2507:43:39【问题描述】:我有一个页脚,其中有不同的社交媒体图标。现在,我想创建一个悬停效果,显示悬停图标的名称。例如:我的鼠标在fac... 查看详情

CSS:如何仅在支持悬停的设备上允许悬停状态?

】CSS:如何仅在支持悬停的设备上允许悬停状态?【英文标题】:CSS:Howtoallowthehoverstateonlyondeviceswhichsupporthover?【发布时间】:2019-09-1523:09:14【问题描述】:我正在寻找一种方法来防止触摸设备“模拟”悬停事件。原因是您不能... 查看详情

如何仅在鼠标悬停时在树节点的右端显示一个小图标

】如何仅在鼠标悬停时在树节点的右端显示一个小图标【英文标题】:Howtoshowasmallicononrightendofthetreenodeonlyonmouseover【发布时间】:2019-04-0707:59:46【问题描述】:我试图在同一树节点的鼠标悬停时在树节点上显示一个图标。Vue.compo... 查看详情

用光标加载 UICollectionView

】用光标加载UICollectionView【英文标题】:LoadUICollectionViewwithacursor【发布时间】:2015-07-0512:01:40【问题描述】:我有一个应用程序,其中包含从CloudKit中提取的图像集合视图。我有一个CKManager类,它执行所有与CK相关的方法。在vie... 查看详情

如何在内部 div 悬停时从外部 div 中删除图标?

】如何在内部div悬停时从外部div中删除图标?【英文标题】:Howtoremoveiconsfromouterdivoninnerdivhover?【发布时间】:2021-11-2407:57:09【问题描述】:有两个div,两个div的角落都有一个图标来编辑它们的属性。我希望在任何特定时间只出... 查看详情

如何实现鼠标放在图片上显示一个播放图标?

...指针落在某张图片上的时候,就会出现一个播放的图标。如何才可以实现?!要什么代码?详细的步骤是怎样的?!谢谢!看图片,当鼠标滑过这个图片的时候,会出现那个播放图标,如何实现?1、用脚本(js或jquery)实现:onm... 查看详情

CSS Sprites 在图像上显示损坏的图像图标,但悬停仍然有效

】CSSSprites在图像上显示损坏的图像图标,但悬停仍然有效【英文标题】:CSSSpritesshowingbrokenimageiconoverimage,buthoverstillworks【发布时间】:2010-12-2711:46:30【问题描述】:我想不通..希望其他人可以。我有一个图像按钮。悬停效果很好... 查看详情

悬停时按钮栏显示文本

】悬停时按钮栏显示文本【英文标题】:Buttonbardisplaytextonhover【发布时间】:2015-02-1108:34:34【问题描述】:我想知道是否有某种方法可以仅使用CSS(无JS)生成以下内容这就是我想要完成的:只是一个div,右侧浮动有2个很棒的字... 查看详情

悬停时子菜单异常

...但是单击子菜单中的某个链接非常困难,因为它通常在您用光标到达它之前就消失了。我不知道它什么时候停留,什么时候消失,我很卡住。有人知道如 查看详情

悬停在图片上时如何创建圆形悬停显示

】悬停在图片上时如何创建圆形悬停显示【英文标题】:Howtocreateacirclehoverrevealwhenhoveringoverapicture【发布时间】:2021-06-3014:07:19【问题描述】:当您将鼠标悬停在png上时,我会尝试创建悬停动画,该png是在其后面显示一个圆圈的a... 查看详情

悬停、鼠标悬停和鼠标移出

...问题描述】:我正在学习和使用jQuery,并希望为某些元素显示一个删除图标。我有一个外部主div,其中包含元素的包装器数量。在元素包装器内部,我想在用户将鼠标悬停在元素包装器上时显示一个删除图标,并在用户移出元素... 查看详情

显示带有焦点和悬停的 Tooltipster 提示

...显示是否有人也点击了信息图标。我似乎找不到任何关于如何在悬停和焦点上启用弹出窗口的示例。这是该项目中已经存在的内容:HTML 查看详情

如何在特定卡片上制作悬停效果并停止在剩余卡片上悬停?

】如何在特定卡片上制作悬停效果并停止在剩余卡片上悬停?【英文标题】:Howtomakeahovereffectonaparticularcardandstopshoveringonremainingcards?【发布时间】:2021-08-3122:49:39【问题描述】:如果我将鼠标悬停在一张卡片上,它会显示每张卡... 查看详情

Bootstrap - 在鼠标悬停时更改图标图像[重复]

...所有的尝试都没有成功。这是我目前的代码,它可以正确显示图像,但当然,鼠标悬停时什么也不做:HTML& 查看详情

悬停在 Bootstrap 按钮图标上时显示半圆形效果

】悬停在Bootstrap按钮图标上时显示半圆形效果【英文标题】:Showsemi-circleeffectonhoveringoverBootstrapbuttonicon【发布时间】:2021-01-1906:56:05【问题描述】:我一直在尝试按我想要的方式设计按钮的悬停属性。谷歌无法帮助我。下面的图... 查看详情

如何根据父悬停状态显示孩子或其他人(仅限 CSS)

】如何根据父悬停状态显示孩子或其他人(仅限CSS)【英文标题】:Howtoshowachildoranotherdependingonparenthoverstate(CSSOnly)【发布时间】:2021-09-1104:39:16【问题描述】:我正在反应中构建一个菜单组件,它显示一个选项列表。每个选项的... 查看详情