react提示框几秒_react项目中实现悬浮（hover）在按钮上时在旁边显示提示

最新推荐文章于 2024-03-08 10:15:49 发布
最新推荐文章于 2024-03-08 10:15:49 发布
阅读量906 收藏
点赞数
文章标签： react提示框几秒
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_28972529/article/details/113996798
版权

.device-icon{width:24px;height:24px;outline:none;cursor:pointer;margin-right:11px;position:relative;&:nth-last-child(2) {

margin-right: 24px;

}}

.camera-icon{background:url('~ROOT/shared/assets/image/vn-screen-camera-off-66-66.png') no-repeat center;background-size:22px 22px;&.camera-icon-hover-show-intro {

&:hover:after {

box-sizing: border-box;height:24px;line-height:24px;position:absolute;bottom:-26px;border-radius:12px;background-color:#ffffff;font-size:12px;color:#626e80;font-style:normal;cursor:default;text-align:center;content:attr(labeltooltip);width:58px;left:-20px;

}}

&.active{background:url('~ROOT/shared/assets/image/vn-camera-hover-69-66.png') no-repeat center;background-size:23px 22px;

}}

.mic-icon{background:url('~ROOT/shared/assets/image/vn-screen-voice-on-54-72.png') no-repeat center;background-size:18px 24px;&.mic-icon-hover-show-intro {

&:hover:after {

box-sizing: border-box;height:24px;line-height:24px;position:absolute;bottom:-26px;border-radius:12px;background-color:#ffffff;font-size:12px;color:#626e80;font-style:normal;cursor:default;text-align:center;content:attr(labeltooltip);width:58px;left:-20px;

}}

&.active{background:url('~ROOT/shared/assets/image/vn-mic-hover-54-72.png') no-repeat center;background-size:18px 24px;

}}

.speaker-icon{background:url('~ROOT/shared/assets/image/vn-screen-speaker-60-66.png') no-repeat center;background-size:20px 22px;

}.wifi-icon{background:url('~ROOT/shared/assets/image/vn-screen-wifi-72-57.png') no-repeat center;background-size:24px 19px;&.wifi-icon-hover-show-intro {

&:hover:after {

box-sizing: border-box;height:24px;line-height:24px;position:absolute;bottom:-26px;border-radius:12px;background-color:#ffffff;font-size:12px;color:#626e80;font-style:normal;cursor:default;text-align:center;content:attr(labeltooltip);width:58px;left:-20px;

}}

&.active{background:url('~ROOT/shared/assets/image/vn-wifi-72-72.png') no-repeat center;background-size:24px 24px;

}}

.restart-icon{background:url('~ROOT/shared/assets/image/vn-screen-restart-60-60.png') no-repeat center;background-size:19px 19px;

}.exit-icon{background:url('~ROOT/shared/assets/image/vn-screen-exit-60-60.png') no-repeat center;background-size:19px 19px;&.exit-icon-hover-show-intro {

&:hover:after {

box-sizing: border-box;height:24px;line-height:24px;position:absolute;bottom:-26px;border-radius:12px;background-color:#ffffff;font-size:12px;color:#626e80;font-style:normal;cursor:default;text-align:center;content:attr(labeltooltip);width:95px;left:-35px;

}}

&.active{background:url('~ROOT/shared/assets/image/screen-exit-blue-60-60.png') no-repeat center;background-size:19px 19px;

}}

荣耀张大仙mk~~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react 鼠标移入放大_react项目中实现悬浮（hover）在按钮上时在旁边显示提示
weixin_29704001的博客
12-23 3235
className={classNames({'device-icon': true,'camera-icon': true,'camera-icon-hover-show-intro': this.state.shouldVolumeGainBarShow === false,active: this.state.isCameraOpened === true,})}role="button"t...
React 循环组件 && hover 实现的小效果
sunlei19951007的博客
05-10 6635
在一个展示型网站一些 hover 的小效果简单又实用。 在 React 中对元素 / 组件添加 onMouseEnter 和 onMouseLeave 即可完成鼠标移入移出事件。 Code import React, {Component} from 'react'; import './index.css'; class Management extends Comp...
react-hover:React悬停---使悬停变得容易http
05-06
React悬停---将任何东西变成“悬停”对象 安装 npm $ npm install --save react-hover Codesandbox演示 演示版 用法 您可以在React-hover中打开纯HTML或自定义触发器/鼠标悬停组件。 以下是自定义组件的示例： < ReactHover xss=removed> < Trigger xss=removed> < TriggerComponent> < / Trigger > < Hover xss=removed> < HoverComponent> < / Hover > < / ReactHover > 或纯HTML元素： < ReactHover options = { optionsC
React点击/hover修改CSS样式
xxtz0522的博客
05-23 9329
（1）点击修改样式 方法一：（typescript写法） type state = { selected: boolean; }; class Measurement extends Component<{}, state> { constructor(props:any) { super(props); this.state =...
react 入坑学习（十）悬浮消息提示按钮
JeffanChen的博客
08-12 969
大致写了一下，挺粗糙的 import {BellOutlined } from '@ant-design/icons' import {Badge, Affix } from 'antd'; .... return( <Affix offsetTop={60} style={{position:'absolute' ,top:60, left:'95%'}}> // <a href="#"> <Badge count={5}> <Butt
react项目中实现悬浮（hover）在按钮上时在旁边显示提示
weixin_30952103的博客
03-13 5876
<i className={classNames({ 'device-icon': true, 'camera-icon': true, 'camera-icon-hover-show-intro': this.state.shouldVolumeGainB...
quill鼠标悬浮 出现提示_添加鼠标悬浮在控件上的提示信息 很齐全各种方法 MFC ToolTipCtl...
weixin_39687422的博客
12-21 348
摘自网络:方法一： 利用CWnd本身自身支持的tooptip来实现，这种方法适用给控件增加tooltip，非常方便和简单方法如下： 1、在窗口中增加消息映射ON_NOTIFY_EX(TTN_NEEDTEXT, 0, SetTipText) SetTipText是个回调函数，名字叫什么无所谓，符合原型就行了，原型下面会说。 2、EnableToolTips(TRUE)，使用这个方法调用这个函数...
react antd Input鼠标悬浮时显示已输入内容
Z_Wonderful的博客
03-08 223
react antd Input鼠标悬浮时显示已输入内容
JS中使用react-tooltip插件实现鼠标悬浮显示框
10-17
前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了react-tooltip插件,今天写一个总结，感兴趣的朋友跟随小编一起看看吧
在React框架中实现一些AngularJS中ng指令的例子
01-21
比较容易理解的Angularjs ng-class设置样式代码，那我们使用React怎么去实现它呢？ 首先在state设置一个变量比如： isShowLoginMenu，在不同场景改变它的值，然后在绑定在class样式上面    ...
react-laag:可以在React中构建工具提示，下拉菜单和弹出框之类的东西
04-29
用于定位工具提示和弹出框的挂钩 react-laag提供了两个工具来轻松定位UI元素，例如工具提示和弹出窗口。 通过处理繁重的工作（例如复杂的计算），您可以专注于UI的外观，感觉和行为，否则您就必须自己做。 自己尝试...
React Native悬浮按钮组件的示例代码
01-21
React Native悬浮按钮组件：react-native-action-button，纯JS组件，支持安卓和IOS双平台，支持设置子按钮，支持自定义位置和样式和图标。 效果图 安装方法 npm i react-native-action-button --save react-...
####这是一篇对python的详细解析
05-28
python
菜日常菜日常菜日常菜日常
05-28
菜日常菜日常菜日常菜日常
VB学生档案管理系统设计(源代码+论文).rar
05-28
计算机专业毕业设计VB精品论文资源
电商到底怎么做？淘系电商三维经营心法（59节课）-课程网盘链接提取码下载 .txt
05-28
课程内容： 10-经营常见4大循环-被资本绑架思维.mp4 11-落地中的47个坑-产品坑.mp4 12-落地中的47个坑-一把手坑.mp4 13-落地中的47个坑-迷信坑.mp4 14-落地中的47个坑-缺乏坑.mp4 15-落地中的47个坑-团队坑.mp4 16-电商经营常见导致的10种挂法.mp4 18-淘系电商干法介绍.mp4 19-淘系电商的特点.mp4 20-淘系买家购物场景.mp4 21-淘系干法-标品.mp4 22-淘系电商干法-半标品.mp4 23-答疑.mp4 25-3类7种常见“干法”模型.mp4 26-6类产品日常运营报表.mp4 27-6类产品日常运营报表-高客单价店铺.mp4 28-6类产品运营报表-低客单价.mp4 29-6类产品运营报表-爆款数据模型季节性商品.mp4 2-前言.mp4 30-6类产品日常运营-标品.mp4 31-6类产品日常运营报表-非标品.mp4 32-6类产品日常运营报表-全店客服.mp4 33-执行就是一条：运营公式.mp4 35-搜索算法逻辑.mp4 36-2024年词层分层“激
grpcio-1.63.0-cp312-cp312-linux_armv7l.whl
最新发布
05-28
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
labview使用DAQ采集数据时显示设备标识符无效
05-28
当安装好NI-DAQmx后仍然无法运行采集程序，并且显示显示设备标识符无效，则需要添加虚拟采集设备。
react实现图形验证码_在React中随机生成图形验证码
05-15
要在React中实现图形验证码，可以使用第三方库react-captcha来生成验证码。首先，需要在项目中安装react-captcha。 ``` npm install react-captcha --save ``` 然后，在组件中使用Captcha组件来生成验证码。在这个组件中，我们可以设置一些属性，例如验证码长度、字符集、背景颜色等等。在这个例子中，我们将生成一个长度为6的验证码，字符集为大小写字母和数字，背景颜色为浅灰色。 ``` import React from 'react'; import Captcha from 'react-captcha'; class CaptchaExample extends React.Component { render() { return ( <Captcha captchaCodeLength={6} captchaChars={'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'} captchaBgColor={'#f2f2f2'} /> ); } } export default CaptchaExample; ``` 此时，我们已经能够在React中生成图形验证码了。但是，我们还需要在验证码输入框中验证用户输入是否正确。这可以通过在Captcha组件上设置onVerify属性来实现。 ``` import React from 'react'; import Captcha from 'react-captcha'; class CaptchaExample extends React.Component { constructor(props) { super(props); this.state = { captchaCode: '', validCaptcha: '' }; } handleVerify = code => { this.setState({ validCaptcha: code }); }; handleSubmit = e => { e.preventDefault(); if (this.state.captchaCode === this.state.validCaptcha) { alert('验证码正确！'); } else { alert('验证码错误！'); } }; handleChange = e => { this.setState({ captchaCode: e.target.value }); }; render() { return ( <form onSubmit={this.handleSubmit}> <Captcha captchaCodeLength={6} captchaChars={'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'} captchaBgColor={'#f2f2f2'} onVerify={this.handleVerify} /> <input type="text" value={this.state.captchaCode} onChange={this.handleChange} /> <button type="submit">提交</button> </form> ); } } export default CaptchaExample; ``` 在这个例子中，我们在Captcha组件上设置了onVerify属性，当用户输入验证码时，会自动调用handleVerify方法，将生成的验证码存储在validCaptcha状态中。当用户提交表单时，将会比较用户输入的验证码和生成的验证码是否一致。如果一致，则弹出“验证码正确！”的提示框，否则弹出“验证码错误！”的提示框。 这样，我们就完成了在React中生成图形验证码的过程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值