更换光标； div单击向下滚动到div

Question

我要使一个div可点击以便向下滚动到另一个div。我还想将光标悬停在此可点击的div上时将光标更改为向上箭头，我该如何实现？

https://codepen.io/anon/pen/WPoNrw

$("#top").click(function() {
$('html,body').animate({
    scrollTop: $("#middle").offset().top},
    'slow');
});

Answer 1

您的codepen很好，唯一的问题是未调用Jquery。 您可以通过设置添加源和不同的CDN。

查看我的：https://codepen.io/anon/pen/PVbobo

至于悬停上的向上箭头，我不确定是否有向上箭头。也许您正在寻找“指针”。

关于如何在悬停时执行此操作-见下文

#top:hover {
   cursor:pointer;
}

您可以将光标更改为here

我暂时将其作为“指针”，因为我认为它最适合您的代码。

Answer 2

您已正确完成。它不适用于您的Codepen代码段的原因是因为您可能忘记了添加Jquery

Answer 3

您可以在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>