css零基礎(chǔ)自學(xué)教程（七）css鏈接樣式，自定鼠標(biāo)樣式

css鏈接

鏈接可以使用任何css屬性(例如,color,font-family,background等)來(lái)設(shè)置樣式.

另外,鏈接的樣式可以不同,具體取決于所處的狀態(tài).以下偽選擇器可用:

a:link 定義正常的為訪問(wèn)鏈接的樣式

a:visited 定義訪問(wèn)鏈接的樣式

a:active 一旦點(diǎn)擊鏈接,鏈接就會(huì)激活

a:hover 當(dāng)鼠標(biāo)懸停時(shí),鏈接的樣式

下面的例子,創(chuàng)建一個(gè)鏈接,當(dāng)鼠標(biāo)移動(dòng)到它上面的時(shí)候會(huì)改變樣式

html代碼:

css代碼:

a:hover{ color:red; }

執(zhí)行結(jié)果如下:

這是鼠標(biāo)移動(dòng)到鏈接上時(shí),顯示的樣式

當(dāng)為鏈接設(shè)置樣式時(shí),必須遵守以下規(guī)則:

a:hover 必須在a:link和a:visited之后

a:active 必須在a:hover之后

默認(rèn)情況下,文本鏈接由瀏覽器加下劃線.

處理帶鏈接的文本,css最常見(jiàn)的用法之一是刪除下劃線.在下面的示例中,text-decoration屬性用于刪除下劃線.

html代碼:

<a class="text-decoration" href="https:www.sougou.com">我的下劃線已經(jīng)被刪除了!</a>

css代碼:

a.text-decoration:link{text-decoration:none;}

效果如下:

以下屬性用于控制鏈接的樣式:

border:none 從包含鏈接的圖像中刪除邊框

outline:none 刪除IE中點(diǎn)擊鏈接行上的虛線邊框

二 css自定義鼠標(biāo)光標(biāo)樣式

css允許你將鼠標(biāo)懸停在元素上時(shí),設(shè)置所需的光標(biāo)樣式.例如,你可以將光標(biāo)更改為手形圖標(biāo),幫助圖標(biāo)等.而不是默認(rèn)的指針.

在下面的例子中,當(dāng)我們將鼠標(biāo)移動(dòng)到span元素上時(shí),鼠標(biāo)指針被設(shè)置為一個(gè)幫助圖標(biāo).(cursor就是光標(biāo)的意思)

需要幫忙么?

效果如下:

cursor屬性還有許多其他的值.例如:

default:默認(rèn)光標(biāo)

crosshair:光標(biāo)顯示為十字準(zhǔn)線

pointer:光標(biāo)顯示為手形圖標(biāo)

cursor的值比較多,用圖片顯示給大家:

通常改變鼠標(biāo)光標(biāo)的外觀,是為了提高網(wǎng)站訪問(wèn)者的體驗(yàn).但是,選擇錯(cuò)誤的光標(biāo)風(fēng)格也可能會(huì)引起誤解.

果你想讓你的網(wǎng)站看起來(lái)更酷炫，可以改變鼠標(biāo)樣式，用你喜歡的圖片來(lái)代替。

下面就來(lái)介紹下步驟方法：

首頁(yè)把鼠標(biāo)圖標(biāo)格式轉(zhuǎn)換成.ico格式，大小為32*32

轉(zhuǎn)換格式網(wǎng)址為：https://www.easyicon.net/covert/

然后在CSS樣式中增加代碼：

*{
 cursor:url(../images/shubiao.ico),auto;
}

大功告成啦~~~

說(shuō)明：

圖片大小最好是32*32的大小
Css中的cursor屬性不僅僅需要將url（）書寫正確，還需要填寫一個(gè)備用樣式。 cursor:url('圖片地址'),備用選項(xiàng);。缺一不可。

歡迎大家多多留言討論，如有錯(cuò)誤請(qǐng)大神指教，如果你是小白也可以私信“資料”領(lǐng)取前端學(xué)習(xí)資料一起學(xué)習(xí)

建民翻譯

您是否曾經(jīng)訪問(wèn)過(guò)一個(gè)網(wǎng)站并被其驚人的功能所震撼？其中之一可能是一個(gè)很酷的鼠標(biāo)光標(biāo)，它不同于您習(xí)慣的常規(guī)箭頭或指針光標(biāo)。

這確實(shí)可以改善用戶體驗(yàn)，最近我一直想知道它是如何工作的。所以我開(kāi)始做一些研究，我發(fā)現(xiàn)它是如何完成的。

在本文中，我將解釋如何制作自定義鼠標(biāo)光標(biāo)。在本文結(jié)束時(shí)，您將學(xué)習(xí)如何使用CSS和JavaScript兩種不同的方法制作這些光標(biāo)。然后，您將準(zhǔn)備好使用不同的創(chuàng)意光標(biāo)來(lái)充實(shí)您的網(wǎng)站，以保持您的觀眾的參與度。

如何使用CSS自定義鼠標(biāo)光標(biāo)

使用CSS自定義鼠標(biāo)光標(biāo)非常簡(jiǎn)單，因?yàn)镃SS已經(jīng)有一個(gè)屬性來(lái)處理這個(gè)問(wèn)題。我們需要做的就是識(shí)別這個(gè)屬性并使用它。作為前端工程師，我們經(jīng)常使用這個(gè)屬性——它就是萬(wàn)能的cursor屬性。是的，該屬性使我們能夠制作我們選擇的自定義光標(biāo)。

在我們進(jìn)入一個(gè)實(shí)際的例子之前，讓我們看一下與CSS cursor屬性相關(guān)的值。雖然大多數(shù)開(kāi)發(fā)人員只使用了一些重要的，但我們應(yīng)該看看更多。

從上圖中，您可以看到每個(gè)CSS cursor屬性值名稱和對(duì)應(yīng)的值的說(shuō)明。

現(xiàn)在如何使用CSS自定義鼠標(biāo)光標(biāo)？要使用它，您只需告訴CSS您打算使用什么圖像，并使用該url值將光標(biāo)屬性指向圖像URL。

從上面的代碼片段中，你可以看到我在文檔正文上設(shè)置了這個(gè)，所以無(wú)論光標(biāo)移動(dòng)到哪里，它都可以應(yīng)用于光標(biāo)。它具有指定的圖像url()。

該屬性的下一個(gè)值是備用，以防圖像未加載或可能由于某些內(nèi)部故障而無(wú)法找到。我確定您不希望您的網(wǎng)站“無(wú)光標(biāo)”，因此添加后備非常重要。您還可以添加盡可能多的后備URL。

您還可以在網(wǎng)頁(yè)的特定元素或部分上自定義光標(biāo)。下面是一個(gè) CodePen 示例：

這就是在CSS中自定義光標(biāo)的全部?jī)?nèi)容。現(xiàn)在讓我們看看如何用 JavaScript 做到這一點(diǎn)。

如何使用JavaScript制作自定義鼠標(biāo)光標(biāo)

要使用JavaScript實(shí)現(xiàn)這一點(diǎn)，您需要操作DOM以獲得所需的結(jié)果。

首先，讓我們看一下 HTML：

從上面的代碼片段中，我創(chuàng)建了兩個(gè)div來(lái)表示光標(biāo)。計(jì)劃是從JavaScript操作這些 div，以便它們?cè)诰W(wǎng)頁(yè)上的移動(dòng)由 JavaScriptmousemove事件使用鼠標(biāo)移動(dòng)的 X 和 Y 坐標(biāo)滾動(dòng)。

現(xiàn)在讓我們來(lái)看看 CSS 部分，這將是一件有意義的事情。

如何使用CSS設(shè)置自定義光標(biāo)的樣式

看看上面的CSS代碼，我禁用了光標(biāo)（還記得cursor:none嗎？）。這將使光標(biāo)不可見(jiàn)，只允許我們的自定義光標(biāo)顯示。

我設(shè)計(jì)的divs樣式賦予它們獨(dú)特的“類似光標(biāo)”的外觀。你絕對(duì)可以用它做更多的事情，如果有圖像，可以添加背景圖像、表情符號(hào)、貼紙等。現(xiàn)在，讓我們看一下JavaScript

如何使用 JavaScript 使光標(biāo)移動(dòng)

我在全局窗口對(duì)象上添加了一個(gè)事件監(jiān)聽(tīng)器來(lái)監(jiān)聽(tīng)任何鼠標(biāo)移動(dòng)。當(dāng)鼠標(biāo)移動(dòng)時(shí)，moveCursor函數(shù)表達(dá)式被調(diào)用并接收事件對(duì)象作為參數(shù)。使用此參數(shù)，我能夠在頁(yè)面上的任何位置獲取鼠標(biāo)上的 X 和 Y 坐標(biāo)。

我已經(jīng)使用JavaScript從DOM中選擇了每種類型的光標(biāo)querySelector。所以我所要做的就是根據(jù)鼠標(biāo)的 X 和 Y 坐標(biāo)移動(dòng)它們，方法是使用translate3d值控制樣式上的變換屬性。這將使div 在鼠標(biāo)移動(dòng)到網(wǎng)頁(yè)上的任何點(diǎn)時(shí)移動(dòng)。

您看到的反引號(hào)稱為模板文字。這可以輕松編寫變量以將它們附加到字符串。另一種方法是將變量連接到字符串。

哪種方法效果最好？

現(xiàn)在由您作為開(kāi)發(fā)人員來(lái)選擇最適合您的方法。如果您想使用一些漂亮的表情符號(hào)或圖像作為光標(biāo)，您可以選擇使用CSS。另一方面，您可能想要使用JavaScript，這樣您就可以自定義您選擇的復(fù)雜形狀并為光標(biāo)的移動(dòng)設(shè)置動(dòng)畫。

無(wú)論哪種方式都很好，只要您獲得所需的結(jié)果并讓您網(wǎng)站的所有訪問(wèn)者驚嘆。

*原文鏈接：https://www.freecodecamp.org/news/how-to-make-a-custom-mouse-cursor-with-css-and-javascript/

在線咨詢

上一篇：如何將doc文檔生成html頁(yè)面
下一篇：html初學(xué)者測(cè)試代碼（適合小白）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。