鼠標事件改變css樣式、選擇器

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

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),珙縣企業(yè)網(wǎng)站建設(shè),珙縣品牌網(wǎng)站建設(shè),網(wǎng)站定制,珙縣網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,珙縣網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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

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

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

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

onMouseMove：鼠標移動事件。（是指在特定元素上移動鼠標。）

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

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

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

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

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

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

.over {}

.out {filter: Gray}

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

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

十字 　

文本光標 　

等待 　

默認 　

問號 　

左右箭頭 　

上下箭頭 　

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

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

:hover 選擇器用于選擇鼠標指針浮動在上面的元素。

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

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

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

css 點擊后樣式

/*?字體鏈接樣式?*/

td.firstLevelMenuClass?a:link?{color:?#3E8BAC;?text-decoration:?none;}??????/*?未訪問的鏈接?*/

td.firstLevelMenuClass?a:visited?{color:?#FFFFFF;?text-decoration:?none;}????/*?已訪問的鏈接?*/

td.firstLevelMenuClass?a:hover?{color:?#FFFFFF;}????/*?鼠標移動到鏈接上?*/

td.firstLevelMenuClass?a:active?{color:?#FFFFFF;}???/*?選定的鏈接?*/

/*?鼠標事件背景樣式?*/

td.firstLevelMenuClass:hover?{background-image:?url(../../Public/img/menu_first_down_bg.gif);?}??/*?鼠標移動到鏈接上?*/

td.span?style="color:#cc0000;"firstLevelMenuClassHover/span{background-image:?url(../../Public/img/menu_first_down_bg.gif);?}

td.firstLevelMenuClass{background-image:?url(../../Public/img/head_menu_center.gif);?}

JS:

[javascript]?view plain?copy

/*

*?取得對應(yīng)類和標簽的HTML元素

*?clsName:給定類名

*?tagName：給定的HTML元素，如果為任意?tagName='*'

*

*/

function?getElementsByClassName(clsName,?tagName)?{

var?ClassElements?=?[];

selElements?=?document.getElementsByTagName(tagName);

for?(var?i?=?0;?i??selElements.length;?i++)?{

if?(selElements[i].className?==?clsName)?{

ClassElements[ClassElements.length]?=?selElements[i];

}

}

return?ClassElements;

}

//通過改變元素class名達到間接改變背景樣式

function?onFirstMenuChangeBg(e)?{

//先清除已經(jīng)改變的元素背景樣式

var?getElements?=?getElementsByClassName('span?style="color:#cc0000;"firstLevelMenuClassHover/span',?'td');

for?(var?i?=?0;?i??getElements.length;?i++)?{

getElements[i].className?=?"firstLevelMenuClass";

}

//設(shè)置鼠標點擊元素背景樣式

e.className?=?"firstLevelMenuClassHover";

}

HTML:

[html]?view plain?copy

td?class="firstLevelMenuClass"?id="firstLevelMenu0"??onclick="onFirstMenuChangeBg(this);"?

a?href='#'測試0/a

/td

td?class="firstLevelMenuClass"?id="firstLevelMenu1"??onclick="onFirstMenuChangeBg(this);"?

a?href='#'測試1/a

/td

td?class="firstLevelMenuClass"?id="firstLevelMenu2"??onclick="onFirstMenuChangeBg(this);"?

a?href='#'測試2/a

/td

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

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

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

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

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

新聞標題：css事件樣式,CSS的常用樣式
網(wǎng)址分享：http://chinadenli.net/article36/dsehesg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、外貿(mào)建站、關(guān)鍵詞優(yōu)化、網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、虛擬主機

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)