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

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

七星網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,七星網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為七星上千多家提供企業(yè)網(wǎng)站建設(shè)服務。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務好的七星做網(wǎng)站的公司定做！

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

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

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

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

/*

*?取得對應類和標簽的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

html css js導航點擊菜單后自動改變背景顏色

1、建立一個靜態(tài)頁命名為change.html ，標題為js導航點擊的怎么同時變圖片跟字體顏色。

2、設(shè)置一個簡易的導航欄。

3、加css 控制菜單的樣式，并加入背景圖片。

4、為li添加id，創(chuàng)建函數(shù)fun ，并傳遞傳遞參數(shù)。

5、為函數(shù)加入點擊導航改變背景圖片的代碼element.style.backgroundImage="url(images/bg2.png)";

6、加入改變文字大小的代碼

element.style.color="black";

//修改文字大小

element.style.fontSize="18px";

7、然后就完成了。

當前名稱：css點擊后改變樣式,css點擊后改變樣式,在點擊回到原來的
本文URL：http://chinadenli.net/article5/dsiehoi.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務、動態(tài)網(wǎng)站、App開發(fā)、自適應網(wǎng)站、網(wǎng)站營銷、移動網(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)