我們?cè)诤芏鄷r(shí)候其實(shí)是需要在網(wǎng)頁(yè)中設(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è)置成我們需要的樣子呢？這完全是可以的，接下來就看下效果吧
創(chuàng)新互聯(lián)主營(yíng)開州網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶App定制開發(fā),開州h5微信小程序搭建,開州網(wǎng)站營(yíng)銷推廣歡迎開州等地區(qū)企業(yè)咨詢
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)圖象或頁(yè)面結(jié)束載入時(shí)產(chǎn)生。）
onUnload：卸載事件。（當(dāng)訪問者離開頁(yè)面時(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è)置指向未被訪問頁(yè)面的鏈接的樣式，:visited 選擇器用于設(shè)置指向已被訪問的頁(yè)面的鏈接，:active 選擇器用于活動(dòng)鏈接。
注釋： 在 CSS 定義中，:hover 必須位于 :link 和 :visited 之后（如果存在的話），這樣樣式才能生效。
[img]做鼠標(biāo)點(diǎn)擊事件更改CSS方法：
若點(diǎn)擊AAA后一直都是none，點(diǎn)任意一個(gè)地方都是none.
div class="BBB" style="display: none;"
則把hide,show方法，換成css()，和你上面那樣式放進(jìn)去即可。
層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集)等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。
html
head
meta?charset="utf-8"
titledemo/title
script?src=""/script
/head
style
.menu{border-bottom:?1px?solid?#ccc;}
.menu?a{
width:?120px;
height:?50px;
text-decoration:?none;
display:?block;
float:?left;
text-align:?center;
line-height:?50px;
}
.on{?border:1px?solid?#ccc;}
/style
script
$(function(){
$(".menu?a").click(function(){
$(this).addClass("on").siblings().removeClass("on");
});
});
/script
body
div?class="menu"
a?href="#"?class="on"欄目一/a
a?href="#"欄目二/a
a?href="#"欄目三/a
a?href="#"欄目四/a
/div
/body
/html
方法步驟：
1.
先獲取要改變css的元素。
2.
改變這個(gè)元素的style屬性。
eg:下面是改變div的背景色,改為藍(lán)色。
style
div{width:200px;height:200px;background:#f00;}
/style
div改變背景色/div
script
var
div
=
document.getElementsByTagName("div");
div.style.background
=
"blue";
/script
簡(jiǎn)單，如果文字的話，那HTML得文字前面就是P標(biāo)簽，那么定義CSS， .p a:{color:顏色；}就可以了前面那個(gè)一樣，關(guān)鍵是看前面的標(biāo)簽是什么,我們一邊用CSS+DIV定義
CSS3 有一個(gè) :target 屬性
這是一個(gè)簡(jiǎn)單的DEMO 高級(jí)用法可以再百度搜索：
!DOCTYPE?html
html
head
style
:target?{
border:?2px?solid?#D4D4D4;
background-color:?#e5eecc;
}
/style
/head
body
h1This?is?a?heading/h1
pa?href="#news1"Jump?to?New?content?1/a/p
pa?href="#news2"Jump?to?New?content?2/a/p
pClick?on?the?links?above?and?the?:target?selector?highlight?the?current?active?HTML?anchor./p
p?id="news1"bNew?content?1.../b/p
p?id="news2"bNew?content?2.../b/p
pbNote:/b?Internet?Explorer?8?and?earlier?versions?do?not?support?the?:target?selector./p
/body
/html
重慶分公司
重慶分公司
