在網(wǎng)站常用的樣式里，鼠標(biāo)進(jìn)入塊元素放大內(nèi)部圖片營(yíng)造與其他圖片不同效果是常用的樣式。
這里有兩種常用方式。
第一種是當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)，圖片會(huì)放大，但是圖片的寬高卻不會(huì)變。
這種樣式其實(shí)就是利用了圖片放大和外層塊元素的超出隱藏，我們只需要給予外部元素overflow：hidden和經(jīng)過(guò)塊元素時(shí)放大圖片就可以了。
可以看到圖片被放大了五倍，正常情況下1.1倍就能夠做成很好的效果。
第二種情況：鼠標(biāo)經(jīng)過(guò)時(shí)元素內(nèi)容變化，但是不改變整體結(jié)構(gòu)。
就比如我們官網(wǎng)首頁(yè)資料庫(kù)，當(dāng)鼠標(biāo)移動(dòng)上去時(shí)已經(jīng)發(fā)現(xiàn)懸浮元素已經(jīng)超過(guò)了其本身的寬高，但是其他元素并沒(méi)有向右或者向下移動(dòng)，并且整體的結(jié)構(gòu)并沒(méi)有發(fā)生改變，
其實(shí)就和我們上邊的圖片放大一樣，只是沒(méi)有overflow超出隱藏，在父元素寬高固定的情況下，內(nèi)部元素放大并不會(huì)影響到整體結(jié)構(gòu)。
下一篇： 偽元素與hover的妙用
