整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
建民 翻译
您是否曾经访问过一个网站并被其惊人的功能所震撼？其中之一可能是一个很酷的鼠标光标，它不同于您习惯的常规箭头或指针光标。
这确实可以改善用户体验，最近我一直想知道它是如何工作的。所以我开始做一些研究，我发现它是如何完成的。
在本文中，我将解释如何制作自定义鼠标光标。在本文结束时，您将学习如何使用CSS和JavaScript两种不同的方法制作这些光标。然后，您将准备好使用不同的创意光标来充实您的网站，以保持您的观众的参与度。
使用CSS自定义鼠标光标非常简单，因为CSS已经有一个属性来处理这个问题。我们需要做的就是识别这个属性并使用它。作为前端工程师，我们经常使用这个属性——它就是万能的cursor属性。是的，该属性使我们能够制作我们选择的自定义光标。
在我们进入一个实际的例子之前，让我们看一下与CSS cursor属性相关的值。虽然大多数开发人员只使用了一些重要的，但我们应该看看更多。
从上图中，您可以看到每个CSS cursor属性值名称和对应的值的说明。
现在如何使用CSS自定义鼠标光标？要使用它，您只需告诉CSS您打算使用什么图像，并使用该url值将光标属性指向图像URL。
从上面的代码片段中，你可以看到我在文档正文上设置了这个，所以无论光标移动到哪里，它都可以应用于光标。它具有指定的图像url()。
该属性的下一个值是备用，以防图像未加载或可能由于某些内部故障而无法找到。我确定您不希望您的网站“无光标”，因此添加后备非常重要。您还可以添加尽可能多的后备URL。
您还可以在网页的特定元素或部分上自定义光标。下面是一个 CodePen 示例：
这就是在CSS中自定义光标的全部内容。现在让我们看看如何用 JavaScript 做到这一点。
要使用JavaScript实现这一点，您需要操作DOM以获得所需的结果。
首先，让我们看一下 HTML：
从上面的代码片段中，我创建了两个div来表示光标。计划是从JavaScript操作这些 div，以便它们在网页上的移动由 JavaScriptmousemove事件使用鼠标移动的 X 和 Y 坐标滚动。
现在让我们来看看 CSS 部分，这将是一件有意义的事情。
如何使用CSS设置自定义光标的样式
看看上面的CSS代码，我禁用了光标（还记得cursor:none吗？）。这将使光标不可见，只允许我们的自定义光标显示。
我设计的divs样式赋予它们独特的“类似光标”的外观。你绝对可以用它做更多的事情，如果有图像，可以添加背景图像、表情符号、贴纸等。现在，让我们看一下JavaScript
我在全局窗口对象上添加了一个事件监听器来监听任何鼠标移动。当鼠标移动时，moveCursor函数表达式被调用并接收事件对象作为参数。使用此参数，我能够在页面上的任何位置获取鼠标上的 X 和 Y 坐标。
我已经使用JavaScript从DOM中选择了每种类型的光标querySelector。所以我所要做的就是根据鼠标的 X 和 Y 坐标移动它们，方法是使用translate3d值控制样式上的变换属性。这将使div 在鼠标移动到网页上的任何点时移动。
您看到的反引号称为模板文字。这可以轻松编写变量以将它们附加到字符串。另一种方法是将变量连接到字符串。
现在由您作为开发人员来选择最适合您的方法。如果您想使用一些漂亮的表情符号或图像作为光标，您可以选择使用CSS。另一方面，您可能想要使用JavaScript，这样您就可以自定义您选择的复杂形状并为光标的移动设置动画。
无论哪种方式都很好，只要您获得所需的结果并让您网站的所有访问者惊叹。
*原文链接：https://www.freecodecamp.org/news/how-to-make-a-custom-mouse-cursor-with-css-and-javascript/
而今，我们纵向的回顾整个大前端的历史，不难发现，人们对前端的审美要求越来越高，越来越严苛，与此同时，人们对追求美的体验是也极致的，从理性到感性，从平面到几何，从现实到虚拟，所以从某种角度来说，作为前端工程师，他们所追求的东西往往和人类软件核心理念南辕北辙，因为人类的终极追求是个性，绝不是共性，换句话说，大家都一样就不好玩儿了。
那么作为web前端，追求个性的手段手段之一就是鼠标指针的更换，早在css2时代，Cursor属性就可以对象鼠标指针光标进行控制，可以根据自身需要选择设置鼠标指针样式，代码如下：
<head>
<title>cursor属性</title>
</head>
<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">Auto......</span><br />
<span style="cursor:crosshair">Crosshair......</span><br />
<span style="cursor:default">Default......</span><br />
<span style="cursor:pointer">Pointer......</span><br />
<span style="cursor:move">Move......</span><br />
<span style="cursor:e-resize">e-resize......</span><br />
<span style="cursor:ne-resize">ne-resize......</span><br />
<span style="cursor:nw-resize">nw-resize......</span><br />
<span style="cursor:n-resize">n-resize......</span><br />
<span style="cursor:se-resize">se-resize......</span><br />
<span style="cursor:sw-resize">sw-resize......</span><br />
<span style="cursor:s-resize">s-resize......</span><br />
<span style="cursor:w-resize">w-resize......</span><br />
<span style="cursor:text">text......</span><br />
<span style="cursor:wait">wait......</span><br />
<span style="cursor:help">help......</span>
</body>
</html>不过这些属性仅仅是更换系统自定义的一些默认样式，毫无新意，当然也不能满足所有用户的需求，特别对于一些追求时尚和个性化的Web应用。因此，CSS允许用户创建自己的鼠标光标图片，并保存为 .cur 的光标文件，然后通过 cursor属性来使用它们。如：
cursor: url(cursors/cursor.cur) ;上述规则表示，要求浏览器加载名称为 cursor.cur 光标文件，并将它用作鼠标光标。当然，浏览器也有可能不支持 .cur 格式的光标文件，或光标文件无法正常加载。因此，大多数浏览器要求必须指定一个备用的光标，否则，cursor属性无效。如：
cursor: url(cursors/cursor.cur), pointer;除了更换鼠标指针，我们也可以稍加一些变化，比如鼠标悬停在超链接的时候，语义化操作往往需要给用户一点提示：
a:hover, a:focus, a:active, a.active {
color: #fec503;
cursor:url(././mouse/breeze/Hand.cur), pointer;
}效果是下面这样:
这里我使用的鼠标风格是在业界鼎鼎有名的 Breeze
当然了由于不同浏览器所支持的光标文件格式不尽相同，Opera和IE仅支持 .cur 格式，Firefox、Chrome和Safari既支持 .cur 格式，也支持常见的 .jpg、.gif、.jpg 等格式。
所以从通用性的角度来看，.cur格式是最保险的，不过也不用担心，如果出现不兼容的情况，系统会选择默认的样式。
值得一提的是，对于.cur文件来说，尺寸最好选择不大于于32*32像素的，因为通过样式进行样式的加载会损耗一些网页性能，同时过大的光标也会影响用户的点选。
最后，如果手里有.cur的鼠标光标图片样式，这些图片不仅仅可以应用在web网站上，像电脑系统也可以使用比如win10,ubuntu或者mac,这里推荐一个鼠标指针风格网站的下载地址：https://zhutix.com/tag/cursors/ 这上面的鼠标指针风格不能说清新脱俗吧，但是也比那些烂大街的杀马特造型要好看多了。
css链接
链接可以使用任何css属性(例如,color,font-family,background等)来设置样式.
另外,链接的样式可以不同,具体取决于所处的状态.以下伪选择器可用:
a:link 定义正常的为访问链接的样式
a:visited 定义访问链接的样式
a:active 一旦点击链接,链接就会激活
a:hover 当鼠标悬停时,链接的样式
下面的例子,创建一个链接,当鼠标移动到它上面的时候会改变样式
html代码:
<p><a href="https://www.sougou.com" target="_blank">搜狗</a></p>
css代码:
a:hover{ color:red; }
执行结果如下:
这是鼠标移动到链接上时,显示的样式
当为链接设置样式时,必须遵守以下规则:
a:hover 必须在a:link和a:visited之后
a:active 必须在a:hover之后
默认情况下,文本链接由浏览器加下划线.
处理带链接的文本,css最常见的用法之一是删除下划线.在下面的示例中,text-decoration属性用于删除下划线.
html代码:
<p><a class="text-decoration" href="https:www.sougou.com">我的下划线已经被删除了!</a></p>
css代码:
a.text-decoration:link{text-decoration:none;}
效果如下:
以下属性用于控制链接的样式:
border:none 从包含链接的图像中删除边框
outline:none 删除IE中点击链接行上的虚线边框
二 css自定义鼠标光标样式
css允许你将鼠标悬停在元素上时,设置所需的光标样式.例如,你可以将光标更改为手形图标,帮助图标等.而不是默认的指针.
在下面的例子中,当我们将鼠标移动到span元素上时,鼠标指针被设置为一个帮助图标.(cursor就是光标的意思)
<span style="cursor:help;">需要帮忙么?</span>
效果如下:
cursor属性还有许多其他的值.例如:
default:默认光标
crosshair:光标显示为十字准线
pointer:光标显示为手形图标
cursor的值比较多,用图片显示给大家:
通常改变鼠标光标的外观,是为了提高网站访问者的体验.但是,选择错误的光标风格也可能会引起误解.
*请认真填写需求信息，我们会在24小时内与您取得联系。
