任务目标

     利用CSS3高级属性制作首页课程路径区域鼠标悬浮过渡效果。

任务要求

对已有的”成长路线“部分对应的元素增加鼠标悬浮特效，课程路线部分整体放大1.2倍，增加盒子阴影，阴影颜色#fd7e14，内部字体颜色变更为#fd7e14。

效果如下图：

任务实施

（1）对已完成的页面内容进行备份并修改。

（2）增加对应商品的hover伪类样式。

（3）在伪类样式中增加2d变形与阴影样式。

教学微课

教学课件

经验分享

细心的你应该发现了，小老鼠的右耳朵出现了变化，被选择的元素遮盖到了。这里需要注意的是，CSS transform变形后图片内容是对周边不会产生布局变化的影响，也就是说可以理解为，仅仅显示内容在变化，而实际的元素的占位主体不会有变化。而关于显示层叠还是有影响的，进行形变后的元素显示内容在上方显示。

这是会产生一个疑问，那如果产生堆叠的相关元素是浮动的或者是定位的元素，那结果又是如何呢？在进一步，如果两个变形元素堆叠了，那显示层次又是如何？当相关元素是浮动特性时时，仍然被覆盖；当相关元素是定位特性或变形特性时，则按照元素在HTML文档结构中的排列顺序，后出现的覆盖先出现的元素。

所以如果出现了元素变形后的显示堆叠情况，又想让变形元素作为底，最简单的方式是，调整相关元素的书写顺序；如果需要复杂的堆叠效果，则通过大量使用定位与定位层级权重设定会是较好地解决方法。

扩展实践

自己动手试一试，效果是否如上面的规则所述。

能量贴士

敖不可长，欲不可从，志不可满，乐不可极。语出《礼记》。