首頁 > 開發者 > JavaScript
CSS3實現的滑鼠懸浮和移開div淡入淡出效果，css3div
CSS3實現的滑鼠懸浮和移開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.softwhy.com/" /><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 屬性詳解一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=16813
更多內容可以參閱:http://www.softwhy.com/divcss/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
