在CSS中,我們可以使用cursor屬性來(lái)更改鼠標(biāo)指針的樣式。但是,如果我們想要讓鼠標(biāo)經(jīng)過(guò)一個(gè)元素時(shí),它向上移動(dòng)怎么辦?
答案是使用CSS的top屬性和position屬性。我們可以將一個(gè)元素的position屬性設(shè)置為relative(相對(duì)定位),然后在:hover偽類中使用top屬性來(lái)向上移動(dòng)該元素。
例子: <style> .box { position: relative; top: 0; transition: top .3s ease-out; } .box:hover { top: -5px; } </style> <div class="box"> <p>這里是一個(gè)含有鼠標(biāo)經(jīng)過(guò)上移效果的盒子。</p> </div>
上面的例子中,我們創(chuàng)建了一個(gè)類名為“box”的div,設(shè)置其position屬性為relative,然后初始狀態(tài)下top為0。在:hover偽類中,我們將其top屬性設(shè)置為-5px,這樣當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí),該元素就會(huì)向上移動(dòng)5個(gè)像素。
我們還為該元素設(shè)置了CSS過(guò)渡效果,這樣移動(dòng)的過(guò)程就會(huì)顯得更加平滑。
總之,在CSS中實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)上移效果很容易,只需要使用relative定位和top屬性結(jié)合使用即可。