案例 列表目录 鼠标悬停 讲解

列表目录鼠标悬停效果

步骤：

1. 定义一个列表目录，目录列表开启相对定位，悬停效果根据列表目录的div进行设置

   <div class="list">
   <div class="elem">HTML5与CSS3基础语法教程</div>
   <div class="elem">CSS3核心技术与新特性教程</div>
   <div class="elem">JavaScript基础语法教程</div>
   

2. 设置鼠标悬停效果：
   思路：

设置另一个列表目录（与前面的列表目录重合），设置背景为 前面的列表目录鼠标悬停时候的 蓝色效果；
html <div class="hover hover1"></div> <div class="hover hover2"></div> <div class&