jquery虽然在很多优秀的前端框架上面，有点黯然失色，但是jquery有它的生态与应用场景。

1. 进行标准化改造，兼容iconfont,layui等图标样式，采用i或者span的方式，直接显示图片的方式；
2. 掌握:after :before等的使用，能有效的为一个html元素，添加额外的元素效果。
3. 掌握css3有关的动画属性的使用：transition: transform 0.2s, opacity 0.2s; transform: scale(.8);等，多种属性结合，能制作出出色的动态效果；
4. 加强jquery的使用，如each，click的方式使用，循环通过$(this)来绑定单个元素的使用方法
5. 使用jquery解析href，获取#锚点，能初始化效果分页的初始化。

知识都是一点一点，一个一个简单效果积累起来的

使用意义与场景

图标原生hover效果是一种常见的网页设计技巧，用于增强用户体验和提升网站的可读性。当用户将鼠标悬停在图标上时，通过CSS的hover伪类，可以实现图标的动态效果。

使用场景方面，图标原生hover效果适用于各种网站，如商业、教育、娱乐等。特别是当需要在网页中提供交互式的视觉效果时，该效果能够吸引用户的注意力，并引导他们进行进一步的点击操作。此外，对于一些需要强调的图标或者按钮，通过添加hover效果，可以突出显示其重要性，提高用户与之交互的意愿。

总之，图标原生hover效果是一种简单而实用的网页设计技巧，能够提升用户体验、增强网站的互动性以及提高页面的可读性。

该组件已经经过仔细优化与完善，并提供了原生的iconfont,或者layui图片等各种图标的结构样式进行了改造，脱离对其他基本样式的依赖，让你使用起来方便！

本图标基本样式，已经入选到精益编程系统中，为pc端网站，增加炫酷的按钮动态效果体验，提高网站的动感体验，增加动感元素。

使用方法

对resource.css中对le-icon的以下所有的样式，并附有详细的说明注释，直接copy到项目中的样式表就行

• 图标html样式：

  <div class="le-icon lean-icon-1 i1">
    <i class="layui-icon layui-icon-firefox"></i>
  </div>

  其中：lean-icon-标识样式效果，为序号，1-9 具有9中效果， i* 一般是1-4，标识子效果，详情预览demo