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

本文链接：https://blog.csdn.net/weixin_28972529/article/details/113996798

本文展示了如何在React项目中实现在按钮悬停时显示提示信息。通过CSS样式，当鼠标 hover 在图标按钮上，会在其旁边显示一个带有提示文字的白色背景框。

摘要由CSDN通过智能技术生成

.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 {

}}

&.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 {

}}

&.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 {

}}

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

}}