整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
建民 翻譯
您是否曾經訪問過一個網站并被其驚人的功能所震撼？其中之一可能是一個很酷的鼠標光標，它不同于您習慣的常規箭頭或指針光標。
這確實可以改善用戶體驗，最近我一直想知道它是如何工作的。所以我開始做一些研究，我發現它是如何完成的。
在本文中，我將解釋如何制作自定義鼠標光標。在本文結束時，您將學習如何使用CSS和JavaScript兩種不同的方法制作這些光標。然后，您將準備好使用不同的創意光標來充實您的網站，以保持您的觀眾的參與度。
使用CSS自定義鼠標光標非常簡單，因為CSS已經有一個屬性來處理這個問題。我們需要做的就是識別這個屬性并使用它。作為前端工程師，我們經常使用這個屬性——它就是萬能的cursor屬性。是的，該屬性使我們能夠制作我們選擇的自定義光標。
在我們進入一個實際的例子之前，讓我們看一下與CSS cursor屬性相關的值。雖然大多數開發人員只使用了一些重要的，但我們應該看看更多。
從上圖中，您可以看到每個CSS cursor屬性值名稱和對應的值的說明。
現在如何使用CSS自定義鼠標光標？要使用它，您只需告訴CSS您打算使用什么圖像，并使用該url值將光標屬性指向圖像URL。
從上面的代碼片段中，你可以看到我在文檔正文上設置了這個，所以無論光標移動到哪里，它都可以應用于光標。它具有指定的圖像url()。
該屬性的下一個值是備用，以防圖像未加載或可能由于某些內部故障而無法找到。我確定您不希望您的網站“無光標”，因此添加后備非常重要。您還可以添加盡可能多的后備URL。
您還可以在網頁的特定元素或部分上自定義光標。下面是一個 CodePen 示例：
這就是在CSS中自定義光標的全部內容?，F在讓我們看看如何用 JavaScript 做到這一點。
要使用JavaScript實現這一點，您需要操作DOM以獲得所需的結果。
首先，讓我們看一下 HTML：
從上面的代碼片段中，我創建了兩個div來表示光標。計劃是從JavaScript操作這些 div，以便它們在網頁上的移動由 JavaScriptmousemove事件使用鼠標移動的 X 和 Y 坐標滾動。
現在讓我們來看看 CSS 部分，這將是一件有意義的事情。
如何使用CSS設置自定義光標的樣式
看看上面的CSS代碼，我禁用了光標（還記得cursor:none嗎？）。這將使光標不可見，只允許我們的自定義光標顯示。
我設計的divs樣式賦予它們獨特的“類似光標”的外觀。你絕對可以用它做更多的事情，如果有圖像，可以添加背景圖像、表情符號、貼紙等?，F在，讓我們看一下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 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小時內與您取得聯系。
