建站
咨詢
售后
建站咨詢
新聞中心
鼠標事件改變css樣式、選擇器
我們在很多時候其實是需要在網(wǎng)頁中設置鼠標效果的，有些是自動生成的，比如一個link鏈接，那么鼠標移上去自動會變成一個手的樣子去點擊，有時候一個input輸入框，那么鼠標就自動變成一個英文大寫I的樣子，那么我們是否可以將更多對象設置成我們需要的樣子呢？這完全是可以的，接下來就看下效果吧
創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：做網(wǎng)站、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的唐河網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！
onClick：鼠標單擊事件。（是指鼠標按下，然后松開時產(chǎn)生。）
onDblClick：鼠標雙擊事件。（是指鼠標快速按下，松開，并再次按下時產(chǎn)生。）
onMouseDown：鼠標按下事件。（鼠標按下時即產(chǎn)生。）
onMouseUp：鼠標釋放事件。（是指鼠標從按下的狀態(tài)到彈起。）
onMouseMove：鼠標移動事件。（是指在特定元素上移動鼠標。）
onMouseOver：鼠標經(jīng)過事件。（是指，當指針從外界往元素上移動時產(chǎn)生。）
onMouseOut：鼠標離開事件。（是指鼠標從特定元素上離開時產(chǎn)生。）
onLoad：載入事件。（當圖象或頁面結束載入時產(chǎn)生。）
onUnload：卸載事件。（當訪問者離開頁面時產(chǎn)生。）
onScroll：滾動條滾動事件。（當訪問者使用卷軸上移或下移時產(chǎn)生。）
將這個自定義樣式應用到圖片上，在瀏覽器中預覽到圖片變成了黑白，我們再定義一個樣式“.over”，這個樣式?jīng)]有任何內(nèi)容，是空樣式，樣式表代碼如下：
.over {}
.out {filter: Gray}
然后在圖片標記（IMG）里加上“onMouseOver="this.className='over'" onMouseOut="this.className='out'"”，意思為當鼠標經(jīng)過時，圖片為over樣式，即彩色正常圖象；當鼠標離開時，圖片為out樣式，即黑白圖像。oMouseOver和onMouseOut是鼠標事件，this.className=”…”表示當前對象的class名 為…，注意大小寫不要寫錯，JS對大小寫非常敏感。
這樣這個效果就完成了，保存后在瀏覽器里打開，圖象是黑白的，當鼠標移上去時，圖象變成彩色，鼠標離開時，圖象又變回黑白。只要發(fā)揮你的想象，通過this.className方法還可以做出很多好看的鼠標效果。
十字
文本光標
等待
默認
問號
左右箭頭
上下箭頭
系統(tǒng)自動給出效果
系統(tǒng)自動給出效果
:hover 選擇器用于選擇鼠標指針浮動在上面的元素。
提示： :hover 選擇器可用于所有元素，不只是鏈接。
提示： :link 選擇器設置指向未被訪問頁面的鏈接的樣式，:visited 選擇器用于設置指向已被訪問的頁面的鏈接，:active 選擇器用于活動鏈接。
注釋： 在 CSS 定義中，:hover 必須位于 :link 和 :visited 之后（如果存在的話），這樣樣式才能生效。
如何利用CSS改變鼠標的樣式
利用cursor設置或檢索在對象上移動的鼠標指針采用何種系統(tǒng)預定義的光標形狀：
cursor屬性的屬性值分為
auto，crosshair，default，hand，move，help，wait，text，w-resize，s-resize，n-resize，e-resize，ne-resize，sw-resize，se-resize，nw-resize，pointer，url(url)
而我們最常用的cursor光標有以下幾種
1）div{cursor:default?}默認正常鼠標指針
2）div{cursor:hand}和div{cursor:text}文本選擇效果
3）div{cursor:move}移動選擇效果
4）div{cursor:pointer}手指形狀鏈接選擇效果
5）div{?cursor:url(url圖片地址)}設置對象為圖
CSS鼠標點擊鏈接的樣式
我們在點擊超鏈接的時候，會發(fā)現(xiàn)
這四個狀態(tài)，鏈接的文本會發(fā)生不一樣的狀態(tài)，這樣的效果就是用CSS的偽類選擇器來實現(xiàn)。
正確的CSS順序應該是
Why?
因為這四個CSS的優(yōu)先級是一樣的，所有后者會覆蓋前者。
從實現(xiàn)的步驟來分析，就應該是這樣排列才對。
用戶的操作步驟是
1. 還沒有點擊鏈接
那么只有 a:link 這一條樣式生效，用戶看到的是沒有點擊的樣式。
2. 鼠標移上去懸浮在鏈接上
那么 a: link 和 a: hover 這兩條生效，由于 a: hover 在后面，所以樣式3覆蓋了樣式1，顯示的是鼠標移上去懸浮在鏈接上這個樣式
3. 鼠標按了下去
那么 a:link 、 a:hover 和 a:active 這三條生效， a:active 覆蓋了前兩者，顯示出來的就是鼠標點擊時候的樣式。
4. 點擊完發(fā)生鏈接之后
那么 a: visited 這一條永久生效，顯示出來的就是鏈接后的樣式。
總之，必須是，
如何用它CSS設置鼠標單擊后的樣式
需要準備的材料分別有：電腦、瀏覽器、html編輯器。
1、首先，打開html編輯器，新建html文件，例如：index.html。
2、在index.html中的style標簽中，輸入css代碼：a:visited {color: blueviolet;}。
3、瀏覽器運行index.html頁面，此時超鏈接文本單擊后的樣式被設置了文字紫色顏色。
名稱欄目：cssa鼠標樣式,h5鼠標樣式
URL分享：http://fisionsoft.com.cn/article/dsehsho.html
