悬浮出现手css

如果你想在你的网站中加入一些有趣的交互效果，那么悬浮出现手的效果绝对是一个不错的选择。

为了实现这个效果，我们需要使用一些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()函数将手的元素从页面中删除。

以上就是我们制作悬浮出现手效果的全部过程，希望本文能够对大家有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！