CSS 鼠标悬浮 移开 div 淡入淡出
分类:实例代码
CSS 鼠标悬浮 移开 div 淡入淡出属于前端实例代码,有关更多实例代码大家可以查看。
本章节介绍一下如何利用css3实现鼠标悬浮和离开div实现淡入淡出效果。
代码实例如下:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> div.demo{ float:left; border:1px solid #ccc; } div.demo i{ cursor:pointer; height:50px; transition:opacity 2s; width:50px; background:#000; float:left; margin:5px; opacity:0; } div.demo i:hover{ opacity:1; transition-duration:0s; } </style> </head> <body> <div class="demo"> <div> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> </body> </html>
上面的代码实现了我们的效果,当鼠标悬浮可以实现元素的淡入淡出效果。
当然这里是<i>元素,不是div,当然div也不成任何问题了,这里只是方便演示而已。
transition-duration参阅CSS3 transition-duration一章节。
CSS 鼠标悬浮 移开 div 淡入淡出,这样的场景在实际项目中还是用的比较多的,关于CSS 鼠标悬浮 移开 div 淡入淡出就介绍到这了。
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu