问题：
一个下拉菜单，结构如下，<!doctype html>
<html lang="en"> <head> <meta charset="UTF-8"> <style> div{ width:400px; height:40px; background:red; position:relative; } div ul{ position:absolute; top:0; left:0; width:200px; height:300px; background:yellow; } p{ width:200px; height:200px; background:blue; } </style> </head> <body> <div> <ul> <li>菜单一</li> <li>菜单二</li> <li>菜单三</li> </ul> </div><p οnmοuseenter=alert(0)></p>
</body></html>1234567891011121314151617181920212223242526272829303132333435363738鼠标移入div，显示菜单ul，移出后隐藏菜单ul，只使用CSS，如何实现既有淡入淡出的效果，而又不影响其他元素，不产生回流？实现
这个问题，看上去似乎很简单，有些同学一定会想到，加透明度就能就解决，来看下是不是。代码
<!doctype html>
<html lang="en"> <head> <meta charset="UTF-8"> <style> /* 红色块 div */ div{ width:400px; height:40px; background:red; position:relative; } /* 黄色块 ul */ div ul{ position:absolute; /* 菜单ul绝对定位 */ top:0; left:0; width:200px; height:300px; background:yellow; opacity:0; /* 开始透明度为0 */ transition:opacity .5s; /* 0.5s完成 透明度0-1的变化 */ } /* 蓝色块 p */ p{ width:200px; height:200px; background:blue; } div:hover ul{ opacity:1; /* 鼠标进入div，ul的透明度从0过渡到1 */ } </style> </head> <body> <div> <ul> <li>菜单一</li> <li>菜单二</li> <li>菜单三</li> </ul> </div><p οnmοuseenter=alert(0)></p>
</body></html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546效果图 明显，并没有达到我们需要的效果，当鼠标进入蓝色块的时候，没有触发绑定的事件，而是把菜单显示出来了，这已经是很大的影响了，这主要是因为，opacity属性只是改变透明度，并不是真的让这个元素消失。说到这，你也许会想到用display属性，但是不可以，首先，display不支持过渡，也就是说，用了他，淡入淡出的效果就没有了，而且他还会产生会回流和重绘，所以这里，我们给他用 visibility 属性就可以了，visibility 属性，支持过渡，而且不会产生回流，虽然 visibility=hidden; 会占据页面空间，但是并不影响其他元素的事件触发和显示。
代码
<!doctype html>
<html lang="en"> <head> <meta charset="UTF-8"> <style> /* 红色块 div */ div{ width:400px; height:40px; background:red; position:relative; } /* 黄色块 ul */ div ul{ position:absolute; /* 菜单ul绝对定位 */ top:0; left:0; width:200px; height:300px; background:yellow; opacity:0; /* 开始透明度为0 */ transition:opacity .5s; /* 0.5s完成 透明度0-1的变化 */visibility:hidden; /* 增加 */
} /* 蓝色块 p */ p{ width:200px; height:200px; background:blue; } div:hover ul{ opacity:1; /* 鼠标进入div，ul的透明度从0过渡到1 */visibility:visible; /* 增加 */
} </style> </head> <body> <div> <ul> <li>菜单一</li> <li>菜单二</li> <li>菜单三</li> </ul> </div><p οnmοuseenter=alert(0)></p>
</body></html>1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950效果图 这样我们就实现了，需要的效果。对比分析
问题解决了，我们来分析一下，opacity、display、visibility这三个属性。 说之前，我们先讲两个概念，回流和重绘。回流
当页面中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(也有人会把回流叫做是重布局或者重排 )。每个页面至少需要一次回流，就是在页面第一次加载的时候。
重绘
当页面中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的时候，比如background-color。则称为重绘。
注意：回流必将引起重绘，而重绘不一定会引起回流。
从图中应该能很清楚看出，他们之间的区别了，要注意的是： visibility支持过渡 visibility属性虽然支持过渡，但是，不是平滑的过渡，而是进行了一个延时，并且它只是 从 visible 过渡 到 hidden 有延迟，从 hidden 过渡到 visible 不延迟，如图 透明度（opacity）不会触发重绘实际上透明度改变后，GPU在绘画时只是简单的降低之前已经画好的纹理的alpha值来达到效果，并不需要整体的重绘。不过这个前提是这个被修改 opacity 本身必须是一个图层，如果图层下还有其他节点，GPU也会将他们透明化
总结
最开始的问题，一般是会出现在做一些鼠标悬停特效的时候，鼠标悬停，出现一个div，或者img，而这些元素刚开始是看不见的，他们定位在页面上，如果他们只是透明度发什么变化，很有可能，影响到其他的元素不能触发事件。简单理解就像，一个a，上面有一个div，div的透明度为0，那么a就无法跳转了，div虽然看不见，但是还是存在的，挡住了a，感觉就像是a上面有一块玻璃，挡住了他。要解决问题，就要给div用上visibility属性。
这篇文章重点还是说最开始提到的那个问题，而对于 opacity、visibility、display 这三个属性并没有进行非常详细的对比分析，所以后来又写了一篇文章。
CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析--------------------- 作者：FEWY 来源：CSDN 原文：https://blog.csdn.net/FE_dev/article/details/72628734 版权声明：本文为博主原创文章，转载请附上博文链接！