使用原生JavaScript设计和实现Tooltip浮动提示框特效，了解代码简化、事件绑定、事件冒泡等技巧和知识。
特效四个关键点：
显示：鼠标移到ToolTip超链接上时，ToolTip提示框可以显示出来
隐藏：鼠标移开时，ToolTip提示框自动隐藏
定位：ToolTip提示框的位置需要根据ToolTip超链接的位置来设置
可配置：ToolTip提示框可以根据参数不同，改变尺寸和显示内容
注意点：1）border-radius和 box-shadow兼容写法
2）不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave
3）W3C规定不允许内联元素嵌套块级元素 ，其中的a链接嵌套了div，可能不符合W3C标准( tip：他是移入a链接的时候在a链接中创建的div )
简单的函数封装写法（便于引用，缩短代码量）：
1)通过元素的id获得元素的DOM引用
1 var $ = function(id){
2 return document.getElementById(id);
3 }
2)绑定事件的函数
1 function addEvent(obj,event,fn){ //要绑定的元素对象，要绑定的事件，触发的回调函数
2 if(obj.addEventListener){ //非IE，支持冒泡和捕获
3 obj.addEventListenner(event,fn,false);
4 }else if(obj.attachEvent){ //IE，只支持冒泡
5 obj.attachEvent('on'+event,fn);
6 }
7 }
效果如图：
1 2 3 4 56 7 59 190 191 192209 210原生JavaScript实现ToolTip效果
193ToolTip效果是非常常见的网页特效，它可以在用户将指针放置在控件上时为用户显示提示信息。 194 比如简称文字显示一行文字全称，例：中国， NBA。 195 又比如显示一段文字，例：唐诗三百首中的春晓你会么？如果不看tooltip提示你背不出来的话，那么你 196 可要加油了。 197
198199 ToolTip效果还可以用来显示图片，例：西湖美景。当然显示一块儿带格式的内容也不在话下，例： 200 我的资料。 201
202203 甚至你可以显示一整个网站：例：慕课网。 204
205206 注意好的ToolTip需要考虑样式、效果、页面的边界等信息，希望你可以做出更漂亮的ToolTip效果。 207
208
CSS常用小技巧Trick-第一节
前言
CSS样式属性五花八门，常用的属性也是多如牛毛，有时候需要设置属性却没有思绪，这里记录小编常用的一些CSS技巧，后续若有继续更新，主要用于记录方便后续翻阅。文述若有不妥之处，望留金言，必改之。这类文章将会挂载到CSS3合集标签下，后续亦如此。
Grid布局多列折叠边框
gird 布局多列多行时非常类似表格，不过它没有表格边框融合的border-collapse: collapse 属性，需要手动修改。可以通过调整margin-left:-1px，margin-top: -1px属性值来偏移重叠的边框，达到折叠gird布局边框折叠效果。
没有融合边框前的grid布局表格效果，深色线条有明显的边框重叠，影响用户体验，想通过单边来设置样式，很遗憾，试过了，普通grid表格还能行，遇到多行多列动态渲染的grid表格数据就出问题，所以不用探究了。
源代码如下
<html lang="en"><head><meta charset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>grid布局边框折叠title><style>* {padding: 0;margin: 0;box-sizing: border-box;}body {padding: 20px;}.list-group {display: grid;grid-template-columns: repeat(2, 1fr);list-style: none;box-sizing: border-box;}.list-group li {display: flex;align-items: center;flex-shrink: 0;justify-content: center;border: 1px solid gray;/* 融合边框 *//* margin-left: -1px;margin-top: -1px; */}.list-group li p:first-child {background-color: #eee;text-align: center;border-right: 1px solid gray;}.list-group li p:last-child {background-color: #fff;text-align: center;}p {flex: 1;padding: 10px;}style>head><body><ul class="list-group"><li><p>姓名p><p>张三1p>li><li><p>姓名p><p>张三1p>li><li><p>姓名p><p>张三1p>li><li><p>姓名p><p>张三1p>li><li><p>姓名p><p>张三1p>li><li><p>姓名p><p>张三1p>li><li><p>姓名p><p>张三1p>li>ul>body>html>
想要去掉边框，解开注释margin-left: -1px;margin-top: -1px，即可，代码有备注。这样一来效果就好了许多。
max-height过渡动画
用max-height来做高度过渡动画的好处：盒子高度交给内容来撑开，不需要提前设置盒子高度height，在过渡动画属性名必须注明是max-height来过渡，像这样transition: max-height 0.3s ease;，否则不生效，这种设置在动态菜单面板经常看到，比如华为云官网菜单，还有阿里云官网顶部菜单都是这种，采用鼠标悬浮打开菜单盒子，案例中叫面板panel。
实现效果图，鼠标悬浮按钮上打开panel：
maxheight过渡动画源码
<html lang="en"><head><meta charset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>maxheight过渡动画title><style>.btn {padding: 20px;}.btn:hover ~ .panel {max-height: 300px;padding: 20px;}.panel {max-height: 0px;background-color: rgba(0, 0, 0, 0.4);transition: max-height 0.4s ease-out;overflow: hidden;}.panel:hover {max-height: 300px;padding: 20px;}style>head><body><button class="btn">鼠标悬浮打开panelbutton><div class="panel"><p>菜单1p><p>菜单1p><p>菜单1p><p>菜单1p><p>菜单1p>div>body>html>
CSS的opacity和rgba有什么区别
在 CSS 中，opacity 和 rgba 都与透明度有关，但它们的应用范围和作用不同。以下是它们的区别：
opacity
作用范围：影响整个元素，包括元素的子元素和内容。
使用方法：opacity: value;value 的取值范围是 0 到 1，其中 0 表示完全透明，1 表示完全不透明。
特点：透明度效果会应用到元素本身及其所有子元素，子元素的透明度不会单独调整。
如果需要仅调整背景透明，而不影响子元素的透明度，可以通过其他方法（例如 rgba 或使用伪元素）。
rgba
作用范围：仅用于定义颜色的透明度，不影响整个元素，主要用于遮罩层，比如modal，mask、drawer，float-menu等等场景。
使用方法：rgba(red, green, blue, alpha)
red、green、blue 的取值范围是 0 到 255 或百分比表示。
alpha 的取值范围是 0 到 1，控制颜色的透明度。
特点：只影响颜色的透明度，例如背景色、边框色、文字色等。不会影响整个元素或子元素的透明度。
案例效果对比
源码
<html lang="en"><head><meta charset="UTF-8"><title>css的opacity和rgba有什么区别title><style>.content {width: 300px;height: 300px;}.rgba {background-color: rgba(255, 0, 0, 0.5);}.opacity,.rgba {margin-left: 20px;line-height: 300px;text-align: center;color: #fff;}.opacity {background: tomato;opacity: 0.5;margin-left: 20px;}style>head><body style="display: flex;"><div class="content rgba"><span style="background: blue;">rgbaspan>div><div class="content opacity"><span style="background: blue;">opacityspan>div>body>html>
如果觉得文章有用，记得点赞+转发+在看，谢谢各位小伙伴了。
