在制作类似上图这样的鼠标移入效果时,我首先使用的是JavaScript,使用onmouseover和onmouseout方法添加移入效果;

鼠标移入时在当前图片所在的父元素内部添加一个绝对定位的div,

该div存在范围较大的外部阴影;

再为父元素添加position: relative; overflow: hidden样式;

鼠标移出时去除该div和样式;

之所以这么做的原因是觉得如果为每张图片都添加一个div去做hover效果的话,html代码会变得很累赘;

后来发现这么做会导致一些问题,

1.如果鼠标移动过快,移出效果的脚本可能无法及时完成,

导致内置的div并没有在鼠标移出时消失,或者没有为父元素添加样式;

2.在父盒子和内置div的边界处快速滑动时可能会发生闪烁,

即,在元素内部多次触发了移入和移出效果;

最后使用了:hover,将子盒子直接写在父盒子内部,并将其隐藏visiblity: hidden;

使用:hover伪类，移入父盒子内部时,添加样式visiblity:visible !important;

这样座避免了上述问题的发生.