CSS鼠標(biāo)點(diǎn)擊鏈接的樣式

我們?cè)邳c(diǎn)擊超鏈接的時(shí)候，會(huì)發(fā)現(xiàn)

創(chuàng)新互聯(lián)公司總部坐落于成都市區(qū)，致力網(wǎng)站建設(shè)服務(wù)有成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)絡(luò)營銷策劃、網(wǎng)頁設(shè)計(jì)、網(wǎng)站維護(hù)、公眾號(hào)搭建、小程序設(shè)計(jì)、軟件開發(fā)等為企業(yè)提供一整套的信息化建設(shè)解決方案。創(chuàng)造真正意義上的網(wǎng)站建設(shè)，為互聯(lián)網(wǎng)品牌在互動(dòng)行銷領(lǐng)域創(chuàng)造價(jià)值而不懈努力！

這四個(gè)狀態(tài)，鏈接的文本會(huì)發(fā)生不一樣的狀態(tài)，這樣的效果就是用CSS的偽類選擇器來實(shí)現(xiàn)。

正確的CSS順序應(yīng)該是

Why?

因?yàn)檫@四個(gè)CSS的優(yōu)先級(jí)是一樣的，所有后者會(huì)覆蓋前者。

從實(shí)現(xiàn)的步驟來分析，就應(yīng)該是這樣排列才對(duì)。

用戶的操作步驟是

1. 還沒有點(diǎn)擊鏈接

那么只有 a:link 這一條樣式生效，用戶看到的是沒有點(diǎn)擊的樣式。

2. 鼠標(biāo)移上去懸浮在鏈接上

那么 a: link 和 a: hover 這兩條生效，由于 a: hover 在后面，所以樣式3覆蓋了樣式1，顯示的是鼠標(biāo)移上去懸浮在鏈接上這個(gè)樣式

3. 鼠標(biāo)按了下去

那么 a:link 、 a:hover 和 a:active 這三條生效， a:active 覆蓋了前兩者，顯示出來的就是鼠標(biāo)點(diǎn)擊時(shí)候的樣式。

4. 點(diǎn)擊完發(fā)生鏈接之后

那么 a: visited 這一條永久生效，顯示出來的就是鏈接后的樣式。

總之，必須是，

如何用它CSS設(shè)置鼠標(biāo)單擊后的樣式

需要準(zhǔn)備的材料分別有：電腦、瀏覽器、html編輯器。

1、首先，打開html編輯器，新建html文件，例如：index.html。

2、在index.html中的style標(biāo)簽中，輸入css代碼：a:visited {color: blueviolet;}。

3、瀏覽器運(yùn)行index.html頁面，此時(shí)超鏈接文本單擊后的樣式被設(shè)置了文字紫色顏色。

鼠標(biāo)事件改變css樣式、選擇器

我們?cè)诤芏鄷r(shí)候其實(shí)是需要在網(wǎng)頁中設(shè)置鼠標(biāo)效果的，有些是自動(dòng)生成的，比如一個(gè)link鏈接，那么鼠標(biāo)移上去自動(dòng)會(huì)變成一個(gè)手的樣子去點(diǎn)擊，有時(shí)候一個(gè)input輸入框，那么鼠標(biāo)就自動(dòng)變成一個(gè)英文大寫I的樣子，那么我們是否可以將更多對(duì)象設(shè)置成我們需要的樣子呢？這完全是可以的，接下來就看下效果吧

onClick：鼠標(biāo)單擊事件。（是指鼠標(biāo)按下，然后松開時(shí)產(chǎn)生。）

onDblClick：鼠標(biāo)雙擊事件。（是指鼠標(biāo)快速按下，松開，并再次按下時(shí)產(chǎn)生。）

onMouseDown：鼠標(biāo)按下事件。（鼠標(biāo)按下時(shí)即產(chǎn)生。）

onMouseUp：鼠標(biāo)釋放事件。（是指鼠標(biāo)從按下的狀態(tài)到彈起。）

onMouseMove：鼠標(biāo)移動(dòng)事件。（是指在特定元素上移動(dòng)鼠標(biāo)。）

onMouseOver：鼠標(biāo)經(jīng)過事件。（是指，當(dāng)指針從外界往元素上移動(dòng)時(shí)產(chǎn)生。）

onMouseOut：鼠標(biāo)離開事件。（是指鼠標(biāo)從特定元素上離開時(shí)產(chǎn)生。）

onLoad：載入事件。（當(dāng)圖象或頁面結(jié)束載入時(shí)產(chǎn)生。）

onUnload：卸載事件。（當(dāng)訪問者離開頁面時(shí)產(chǎn)生。）

onScroll：滾動(dòng)條滾動(dòng)事件。（當(dāng)訪問者使用卷軸上移或下移時(shí)產(chǎn)生。）

將這個(gè)自定義樣式應(yīng)用到圖片上，在瀏覽器中預(yù)覽到圖片變成了黑白，我們?cè)俣x一個(gè)樣式“.over”，這個(gè)樣式?jīng)]有任何內(nèi)容，是空樣式，樣式表代碼如下：

.over {}

.out {filter: Gray}

然后在圖片標(biāo)記（IMG）里加上“onMouseOver="this.className='over'" onMouseOut="this.className='out'"”，意思為當(dāng)鼠標(biāo)經(jīng)過時(shí)，圖片為over樣式，即彩色正常圖象；當(dāng)鼠標(biāo)離開時(shí)，圖片為out樣式，即黑白圖像。oMouseOver和onMouseOut是鼠標(biāo)事件，this.className=”…”表示當(dāng)前對(duì)象的class名 為…，注意大小寫不要寫錯(cuò)，JS對(duì)大小寫非常敏感。

這樣這個(gè)效果就完成了，保存后在瀏覽器里打開，圖象是黑白的，當(dāng)鼠標(biāo)移上去時(shí)，圖象變成彩色，鼠標(biāo)離開時(shí)，圖象又變回黑白。只要發(fā)揮你的想象，通過this.className方法還可以做出很多好看的鼠標(biāo)效果。

十字 　

文本光標(biāo) 　

等待 　

默認(rèn) 　

問號(hào) 　

左右箭頭 　

上下箭頭 　

系統(tǒng)自動(dòng)給出效果

系統(tǒng)自動(dòng)給出效果

:hover 選擇器用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素。

提示： :hover 選擇器可用于所有元素，不只是鏈接。

提示： :link 選擇器設(shè)置指向未被訪問頁面的鏈接的樣式，:visited 選擇器用于設(shè)置指向已被訪問的頁面的鏈接，:active 選擇器用于活動(dòng)鏈接。

注釋： 在 CSS 定義中，:hover 必須位于 :link 和 :visited 之后（如果存在的話），這樣樣式才能生效。