如果你想在你的網站中加入一些有趣的交互效果，那么懸浮出現手的效果絕對是一個不錯的選擇。

為了實現這個效果，我們需要使用一些CSS技巧和JS代碼，下面就來為大家介紹一下實現方法。

.hand {
position: absolute;
top: -100px;
left: -100px;
width: 100px;
height: 100px;
background-image: url('hand.png');
background-size: contain;
z-index: 999;
transition: all 0.3s ease-in-out;
}
a:hover .hand {
top: -50px;
left: -50px;
}

以上是我們需要使用的CSS代碼，我們可以看到，首先我們給手的類名設置了一些基本屬性，比如說它的位置、寬高以及背景圖片等等。需要注意的是，我們將它的位置設置的非常偏移，這是為了讓手不會和我們的元素重疊。

然后，我們在鼠標懸浮在某個鏈接上時，通過:hover狀態來觸發我們的效果，將手的位置調整到鏈接的正中央。

除此以外，我們還需要使用以下JS代碼來確保我們的手只會在頁面上出現一次：

$(document).ready(function() {
$('a').hover(function() {
$('
').appendTo(this);
}, function() {
$('.hand').remove();
});
});

這段代碼的作用是，當我們鼠標懸浮在某個鏈接上時，動態地創建一個手的元素，并添加到鏈接中。當我們的鼠標離開鏈接時，可以通過remove()函數將手的元素從頁面中刪除。

以上就是我們制作懸浮出現手效果的全部過程，希望本文能夠對大家有所幫助。