js設(shè)置鼠標(biāo)懸停改變背景色實(shí)現(xiàn)詳解
看了網(wǎng)上那么多的js鼠標(biāo)懸停時(shí)事件,大多數(shù)的,說了那么多話,也沒解決什么問題,現(xiàn)在直接貼上代碼,以供參考
html:
<div id="sign">this is test!</div>
css:
<style type="text/css"> .out{background-color: gray;} .over{background-color: red;} .down{background-color: yellow; } </style>
Way1:
js:
$(function(){ var sign=document.getElementById("sign"); changBkColor(sign); }); function changBkColor(obj){ obj.onmouseover=function(){ this.className="over"; };//鼠標(biāo)懸停事件 obj.onmouseout=function(){ this.className="out"; };//鼠標(biāo)離開事件 obj.onmousedown=function(){this.className="down";};//鼠標(biāo)點(diǎn)擊時(shí)觸發(fā)事件 }
Way2:
JQuery
/* $(obj).hover(inFunction,outFunction) * 等同于$(obj).mouseover().mouseout(); */ $(function(){ $('#sign').hover(function() { $('#sign').addClass('over'); }, function() { $('#sign').removeClass('over').addClass('out'); }); });
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Javascript DOM事件操作小結(jié)(監(jiān)聽鼠標(biāo)點(diǎn)擊、釋放,懸停、離開等)
- js 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示實(shí)例
- 基于JS代碼實(shí)現(xiàn)當(dāng)鼠標(biāo)懸停表格上顯示這一格的全部?jī)?nèi)容
- CSS或者JS實(shí)現(xiàn)鼠標(biāo)懸停顯示另一元素
- js實(shí)現(xiàn)文字垂直滾動(dòng)和鼠標(biāo)懸停效果
- js實(shí)現(xiàn)鼠標(biāo)懸停圖片上時(shí)滾動(dòng)文字說明的方法
- 一個(gè)簡(jiǎn)單的JS鼠標(biāo)懸停特效具體方法
- javascript實(shí)現(xiàn)的鼠標(biāo)懸停時(shí)動(dòng)態(tài)翻滾的導(dǎo)航條
- JavaScript鼠標(biāo)懸停事件用法解析
相關(guān)文章
處理文本部分內(nèi)容的TextRange對(duì)象應(yīng)用實(shí)例
TextRange是用來表現(xiàn)HTML元素中文字的對(duì)象,是一個(gè)用于處理JavaScript對(duì)象文本部分內(nèi)容的一個(gè)對(duì)象2014-07-07JS自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用(兩種場(chǎng)景)
在WEB程序開發(fā)中經(jīng)常會(huì)見到用倒計(jì)時(shí)限制用戶對(duì)表單的操作,希望用戶在規(guī)定的時(shí)間內(nèi)閱讀完協(xié)議信息才允許用戶繼續(xù)下一步操作,本文通過兩種場(chǎng)景分析js實(shí)現(xiàn)自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用,小伙伴快來學(xué)習(xí)吧2015-08-08使用JavaScript修改瀏覽器URL地址欄的實(shí)現(xiàn)代碼
這篇文章主要介紹了如何使用JavaScript修改瀏覽器URL地址欄,需要的朋友可以參考下2013-10-10echarts折線圖每段顯示不同的顏色的實(shí)現(xiàn)
本文主要介紹了echarts折線圖每段顯示不同的顏色的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09JavaScript設(shè)計(jì)模式之命令模式實(shí)例分析
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之命令模式,結(jié)合實(shí)例形式分析了javascript命令模式的概念、原理、用法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2019-01-01JS 巧妙獲取剪貼板數(shù)據(jù) Excel數(shù)據(jù)的粘貼
最近需要在瀏覽器端實(shí)現(xiàn)excel數(shù)據(jù)的粘貼,一開始去找獲取剪貼板數(shù)據(jù)的方法。但是在瀏覽器端,JS去取是受安全限制的。2009-07-07JavaScript中Promise的使用方法實(shí)例
現(xiàn)在不會(huì)用Promise都不好意思說自己是前端,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Promise使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05