纯css 鼠标经过显示动画 替换文字内容

纯css 鼠标经过显示动画 替换文字内容

 

演示

 

 

XML/HTML Code

1. <ul class="readers-list">  
2. <li><a href="http://www.freejs.net" target="_blank"><img alt="jQuery Plugins" src="images/01.gif" class="" height="36" width="36"><em>jQuery Plugins</em><strong>+2</strong></a></li>  
3. <li><a href="http://www.freejs.net" target="_blank"><img alt="CSS3" src="images/02.gif" class="avatar avatar-36 photo" height="36" width="36"><em>Demo</em><strong>+0</strong></a></li>  
4. <li><a href="http://www.freejs.net" target="_blank"><img alt="Demo" src="images/03.gif" class="avatar avatar-36 photo" height="36" width="36"><em>CSS3</em><strong>+0</strong></a></li>  
5. <li><a href="http://www.freejs.net" target="_blank"><img alt="More" src="images/04.gif" class="avatar avatar-36 photo" height="36" width="36"><em>More</em><strong>+3</strong></a></li>  
6. <li><a href="http://www.freejs.net" target="_blank"><img alt="Transitions" src="images/05.gif" class="avatar avatar-36 photo" height="36" width="36"><em>Transitions</em><strong>+2</strong></a></li>  
7. <li><a href="http://www.freejs.net" target="_blank"><img alt="jQuery Plugins" src="images/01.gif" class="avatar avatar-36 photo" height="36" width="36"><em>jQuery Plugins</em><strong>+2</strong></a></li>  
8. <li><a href="http://www.freejs.net" target="_blank"><img alt="CSS3" src="images/02.gif" class="avatar avatar-36 photo" height="36" width="36"><em>Demo</em><strong>+0</strong></a></li>  
9. <li><a href="http://www.freejs.net" target="_blank"><img alt="Demo" src="images/03.gif" class="avatar avatar-36 photo" height="36" width="36"><em>CSS3</em><strong>+0</strong></a></li>  
10. <li><a href="http://www.freejs.net" target="_blank"><img alt="Example" src="images/04.gif" class="avatar avatar-36 photo" height="36" width="36"><em>Example</em><strong>+3</strong></a></li>  
11. <li><a href="http://www.freejs.net" target="_blank"><img alt="Transitions" src="images/05.gif" class="avatar avatar-36 photo" height="36" width="36"><em>Transitions</em><strong>+2</strong></a></li>  
12. </ul>  

 

原文地址:http://www.freejs.net/article_jquerywenzi_275.html