我要使一个div可点击以便向下滚动到另一个div。我还想将光标悬停在此可点击的div上时将光标更改为向上箭头,我该如何实现?
https://codepen.io/anon/pen/WPoNrw
$("#top").click(function() {
$('html,body').animate({
scrollTop: $("#middle").offset().top},
'slow');
});
答案 0 :(得分:1)
您的codepen很好,唯一的问题是未调用Jquery。 您可以通过设置添加源和不同的CDN。
查看我的:https://codepen.io/anon/pen/PVbobo
至于悬停上的向上箭头,我不确定是否有向上箭头。也许您正在寻找“指针”。
关于如何在悬停时执行此操作-见下文
#top:hover {
cursor:pointer;
}
您可以将光标更改为here
我暂时将其作为“指针”,因为我认为它最适合您的代码。
答案 1 :(得分:1)
答案 2 :(得分:1)
您可以在CSS中使用自定义图片来完成此操作。
请参见下面的示例代码:
.url {
border: 1px solid gray;
width: 100px;
height: 50px;
cursor: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E %3Cpath d='M249.628,176.101L138.421,52.88c-6.198-6.929-16.241-6.929-22.407,0l-0.381,0.636L4.648,176.101c-6.198,6.897-6.198,18.052,0,24.981l0.191,0.159c2.892,3.305,6.865,5.371,11.346,5.371h221.937c4.577,0,8.613-2.161,11.41-5.594l0.064,0.064C255.857,194.153,255.857,182.998,249.628,176.101z'/%3E %3C/svg%3E"), auto;
}
<div class='url'>clickable div</div>