CSS中的:hover偽類是我們常用于實現鼠標經過效果的一種方式。今天我們來介紹一下如何使用:hover實現鼠標經過手的效果。

.hand {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ffcd32;
position: relative;
}
.hand:before {
content: "";
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000;
}
.hand:after {
content: "";
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
width: 16px;
height: 4px;
background-color: #000;
}
.hand:hover:before {
height: 40px;
}
.hand:hover:after {
height: 20px;
}

首先，我們需要先定義一個手的div，這個div有50px的寬度和高度，同時也有圓形的邊框半徑和黃色的背景色。

接著，我們需要通過:before和:after偽元素來生成手的指頭和手腕部分。指頭部分是一個小黑點，手腕部分是一個長條形。

最后，我們對:hover偽類進行設置。當鼠標經過手的div時，我們希望手的指頭部分向上延伸出40px的高度，手腕部分向下延伸出20px的高度。

這樣就實現了一個鼠標經過手的效果。:hover偽類在CSS中非常有用，很多鼠標經過效果都是通過它來實現的。