`

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

 
阅读更多

纯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

0
顶
0
踩
分享到：
| 各种下拉菜单 ，多级下拉菜单，向上展开菜 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    15款css3鼠标悬停图片动画过渡特效.zip

    15款css3鼠标悬停图片动画过渡特效是一款15款不同效果的css3 hover动画过渡效果代码。

    jQuery攻略.pdf

    60 3.16 创建“返回顶部”链接 63 3.17 提供“更多……”链接 64 3.18 以动画效果显示文本 67 3.19 以滑动效果来替换文本 70 3.20 使图像滚动 71 3.21 确定被按下的键 75 3.22 防止事件冒泡 77 3.23 链接多个活动 80...

    超实用的jQuery代码段

    1.25 实现文字跟随鼠标移动变化的动画效果 1.26 文本域中光标的定位 1.27 实现可折叠效果 1.28 文本框内容自动缩进 1.29 禁止页面滚动的方法 1.30 页面加载后消息框居中显示 1.31 创建页面固定浮动栏的方法 第2章 ...

    Lynn-Blog：我的第一个个人网站

    建造自己的个人网站v1.0纯...添加主页博文移入鼠标时阴影效果：2020-02-09添加各页面首页封面及其动画，替换设置：修改统一各页面样式，确定最终样式：主页：其他页面：2020-02-12最终成品v1.0参考学习内容MDN网络文档

    xheditor-1.1.14

    参数1：要粘贴的文本，例：'这里的内容完全原样显示&lt;strong&gt;aaa&lt;/strong&gt;' 参数2：是否覆盖粘贴，留空(覆盖粘贴)、true(粘贴在光标选择区域之前)、false(粘贴在光标选择区域之后) formatXHTML：格式化XHTML代码 参数...

    PHP程序开发范例宝典III

    实例061　鼠标单击文字获得帮助效果　89 3.4　页面样式　90 实例062　动态标题栏　90 实例063　滚动条样式　91 实例064　页面整体风格　92 实例065　首尾页切换特效　94 3.5　导航菜单设计　96 实例066　带图标的...

    利用JQuery动画制作滑动菜单项效果实现步骤及代码

    上移从而替换掉原有的文字。 原理其实不难无非就是css的控制加之jquery的代码 对docemnt中所有li绑定一个hover事件，事件中根据鼠标的状态（无非是移入与移除）， 使用animate的动画方式使原有的div向上移70px，...

    精通JavaScript

    • 13.3.htm DHTML对象模型方法显示和修改网页文字内容 • 13.4.htm DHTML对象模型方法新增和删除表格行内容 • 13.5.htm W3C对象模型方法显示和修改网页内容 • 13.6.htm W3C对象...

    C#编程经验技巧宝典

    79 &lt;br&gt;0115　如何判断是否为数字　79 &lt;br&gt;0116　如何在字符串中查找指定字符　79 &lt;br&gt;0117　如何在字符串中用一子串替换另一子串　80 &lt;br&gt;0118　将新字符串添加到已有字符串中　80 &lt;br&gt;0119　如何在...

    精通javascript

    • 13.3.htm DHTML对象模型方法显示和修改网页文字内容 • 13.4.htm DHTML对象模型方法新增和删除表格行内容 • 13.5.htm W3C对象模型方法显示和修改网页内容 • 13.6.htm W3C对象...

    jQuery详细教程

    $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件 四. jQuery实例 jQuery hide() 演示简单的 jQuery hide() 函数。 &lt;script type="text/javascript" src="/jquery/jquery.js"&gt;&lt;/...

    JavaScript实战

    6.1.1 鼠标事件 158 6.1.2 文档/窗口事件 159 6.1.3 表单事件 160 6.1.4 键盘事件 160 6.2 把函数和事件一起使用 161 6.2.1 内联事件 161 6.2.2 传统模型 162 6.2.3 现代方式 163 6.2.4 jQuery方式 164 6.3 教程：...

    jQuery开发技巧

    当鼠标获得焦点 失去焦点的时候 input输入框文字处理： $ document ready function { $ &quot;input text1&quot; val &quot;Enter your search text here&quot; ; textFill $ &quot;input text1&quot; ; } ; ...

    大图jQuery多屏首页焦点图代码

    1、head区域引用文件jquery1.42.min.js，jquery.superslide.2.1.1.js， lrtk.css 2、在文件中加入&lt;!-- 代码 开始 --&gt;&lt;!-- 代码 结束 --&gt;区域代码 3、js参数调用说明： titCell：导航元素对象（鼠标的触发元素对象） ...

    Dreamweaver 扩展

    swftext 将Drm和Flash结合起来了，选择文本，执行该Command，swf动画就轻易的生成了 SliderMenu 设计导航菜单的绝佳助手，可以用于导航菜单的设计，特别是导航项很多的场合 disable_view_source 让网页源代码无法...

    JavaScript详解(第2版)

    　12.3.1　使用src属性动态替换图片　 　12.3.2　预加载图片和Image()构造函数　 　12.3.3　随机显示图片和onClick事件　 　12.3.4　图片地图与JavaScript　 　12.4　缩放图片以适应窗口　 　12.5　幻灯简介　 　...

    70款经典Dreamweaver插件

    swftext 将Drm和Flash结合起来了，选择文本，执行该Command，swf动画就轻易的生成了 SliderMenu 设计导航菜单的绝佳助手，可以用于导航菜单的设计，特别是导航项很多的场合 disable_view_source 让网页源代码无法...

    Dreamweaver 插件集

    将Drm和Flash结合起来了，选择文本，执行该Command，swf动画就轻易的生成了 SliderMenu 设计导航菜单的绝佳助手，可以用于导航菜单的设计，特别是导航项很多的场合 disable_view_source 让网页源代码无法观看 vmkp_...

    青果校园兼职网，阿赛企业网站管理

    注意：根目录有空数据库，替换asaidata文件夹中的数据库即可删除搜索调试中的数据，替换后，需要从后台添加12+的产品，及其他信息方能完美显示前台页面。 ★★★★★★★★★★ 二、系统的优势 1、专业美工操刀，...

Magicbox
Global site tag (gtag.js) - Google Analytics