CSS鼠標經(jīng)過向上滑動效果是很常見的一種效果，他可以讓網(wǎng)頁更加美觀，提升用戶體驗，下面我們就來學習一下CSS實現(xiàn)鼠標經(jīng)過向上滑動的方法。

/*HTML*/
<div class="box">
<p>這是一個盒子</p>
</div>
/*CSS*/
.box {
width: 300px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: #eee;
margin: 50px auto;
position: relative;
}
.box p {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: rgba(0, 0, 0, .7);
color: #fff;
font-size: 24px;
transform: translateY(100%);
transition: transform .3s;
}
.box:hover p {
transform: translateY(0);
}

這段代碼中，我們首先創(chuàng)建了一個名為box的div，設置了他的寬高、背景顏色、居中以及相對定位。然后我們在div內(nèi)部創(chuàng)建了一個p標簽，在其中填入了一些文本用于展示。接著我們使用了絕對定位，讓p標簽位于box的底部，并將其寬高設為100%以覆蓋整個盒子。

為了實現(xiàn)向上滑動的效果，我們使用了CSS中的transform屬性，將p標簽向上移動100%的高度，也就是隱藏了起來。然后使用了transition屬性，讓他在0.3秒內(nèi)慢慢地向下移動回來。

最后，我們使用:hover偽類選擇器來實現(xiàn)鼠標懸浮時觸發(fā)向上滑動的效果。