1-2-11 【实战】CSS实现卡包特效

题外话：建议各位同学看到效果后，先自己写代码实现，然后再看标准答案，会发现一些自己想不到的知识盲区哦~

---

文章内容输出来源：拉勾教育大前端就业集训营

案例：通过CSS实现“卡包”特效

各位同学一定要自己先试试，然后再看答案，会收获更多~

---

标准答案

说明：图片是笔者自己随便找的，大家也自己下载一些喜欢的图片试试吧。

---

错误答案

说明：

• 思路大体是对的“定位+每个图片hover”，但是！别忘了定位是有压盖顺序的，所以鼠标移动到图片上时，其实只触发了第六个img的hover。
• 要解决这个问题，就需要使用父元素的hover，统一用父元素的鼠标悬停事件，来控制6个子元素的旋转。
• 这里有个知识点：事件捕获时就是按照元素从上到下去执行的，doucment->html->body->父级->子级->子级的子级。
• 所以，统一用父元素的某个事件，可以有效的解决子元素压盖的问题。

前端文章汇总目录

https://www.jianshu.com/p/6d80dd616ff4

此处感谢小鹿老师，回答了我这个超纲的问题~

---

结束语：一花一世界，一木一浮生，愿与诸君共勉