前端实例实践-提示框
时间：2023-03-31 12:27:05
CSS
提示框代码存于Github效果预览初衷：很多人刚接触前端都会问，“前端如何入门？”我对网上能看到的“入门级”教材不是很满意。在学习一门新知识时，例子尤为重要。这里我整理一下当前页面常用功能实现的具体例子。希望能为您提供一些帮助。希望与大家分享，共同进步。效果预览HTML部分Hover喜欢就点个赞吧！
CSS部分/*这部分的设置只是为了方便预览，在实际开发中，根据实际情况调整*/body{text-align:center;}#hoverMe{margin-top:100px;}/*提示框*/.tooltip{position:relative;/*让.tooltiptext根据它绝对定位*/display:inline-block;border-bottom:1pxdottedblack;}/*提示框内的文字*/.tooltip.tooltiptext{visibility:hidden;宽度：120px；背景色：#555；颜色：#fff；文本对齐：居中；填充：5px0；边界半径：6px；:1;底部：125%；左：50%；左边距：-60px；/*慢速显示*/opacity:0;transition:opacity1s;}/*提示框小三角*/.tooltip.tooltiptext::after{content:"";位置：绝对；顶部：100%；左：50%；左边距：-5px；边框宽度：5px；边框样式：实心；边框颜色：#555透明透明透明；}/*当鼠标悬停在文本上时，出现提示框*/.tooltip:hover.tooltiptext{visibility:visible;opacity:1;}好了，现在所有的代码都写好了！赶紧打开浏览器看看效果吧！在这里，只是给大家提供一个思路，具体实现可以参考一下，每个人可以有不同的方法。请快快发挥你的想象力，把你最想在电脑上实现的功能打出来吧！来自w3cschools的参考
