在制作類似上圖這樣的鼠標(biāo)移入效果時(shí),我首先使用的是JavaScript,使用onmouseover和onmouseout方法添加移入效果;
鼠標(biāo)移入時(shí)在當(dāng)前圖片所在的父元素內(nèi)部添加一個(gè)絕對(duì)定位的div,
該div存在范圍較大的外部陰影;
再為父元素添加position: relative; overflow: hidden樣式;
鼠標(biāo)移出時(shí)去除該div和樣式;
之所以這么做的原因是覺得如果為每張圖片都添加一個(gè)div去做hover效果的話,html代碼會(huì)變得很累贅;
后來發(fā)現(xiàn)這么做會(huì)導(dǎo)致一些問題,
1.如果鼠標(biāo)移動(dòng)過快,移出效果的腳本可能無法及時(shí)完成,
導(dǎo)致內(nèi)置的div并沒有在鼠標(biāo)移出時(shí)消失,或者沒有為父元素添加樣式;
2.在父盒子和內(nèi)置div的邊界處快速滑動(dòng)時(shí)可能會(huì)發(fā)生閃爍,
即,在元素內(nèi)部多次觸發(fā)了移入和移出效果;
最后使用了:hover,將子盒子直接寫在父盒子內(nèi)部,并將其隱藏visiblity: hidden;
使用:hover偽類，移入父盒子內(nèi)部時(shí),添加樣式visiblity:visible !important;
這樣座避免了上述問題的發(fā)生.
