js設(shè)置鼠標(biāo)懸停改變背景色實現(xiàn)詳解

更新時間：2019年06月26日 10:20:42 作者：代碼飛了 `

這篇文章主要介紹了js設(shè)置鼠標(biāo)懸停改變背景色實現(xiàn)詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，,需要的朋友可以參考下

看了網(wǎng)上那么多的js鼠標(biāo)懸停時事件，大多數(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)點擊時觸發(fā)事件
}

Way2：

JQuery

/* $(obj).hover(inFunction,outFunction)
*　等同于$(obj).mouseover().mouseout();
*/
$(function(){
$('#sign').hover(function() {
$('#sign').addClass('over');
}, function() {
$('#sign').removeClass('over').addClass('out');
});
});

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

小程序與內(nèi)嵌webview的數(shù)據(jù)交互方案詳解
這篇文章主要介紹了小程序與內(nèi)嵌webview的數(shù)據(jù)交互方案,為實現(xiàn)H5頁面到小程序的無縫切換,技術(shù)方案包含使用webview交互,特別是低碼C端表單頁面的處理,需要的朋友可以參考下
2024-09-09
JavaScript定時器setTimeout()和setInterval()詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript定時器setTimeout()和setInterval()的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
如何判斷Javascript對象是否存在的簡單實例
下面小編就為大家?guī)硪黄绾闻袛郕avascript對象是否存在的簡單實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
JS實現(xiàn)驗證碼倒計時的注冊頁面
這篇文章給大家分享一段實例代碼發(fā)送驗證碼之后開始60S倒計時功能，具體實例代碼大家參考下本文
2018-01-01
簡單對比分析JavaScript中的apply,call與this的使用
簡單的說call，apply都屬于Function.prototype的一個方法，它是JavaScript引擎內(nèi)在實現(xiàn)的，因為屬于Function.prototype，所以每個Function對象實例(就是每個方法)都有call，apply屬性。既然作為方法的屬性，那它們的使用就當(dāng)然是針對方法的了，這兩個方法是容易混淆的
2015-12-12
javascript檢查某個元素在數(shù)組中的索引值
在js中提供數(shù)據(jù)查找了函數(shù)有很多，但我查找了很久都沒有能實現(xiàn)我要的方法，后來發(fā)現(xiàn)可以使用indexOf函數(shù)來實現(xiàn)查找與定位數(shù)組元素索引值的具體方法，各位朋友可參考
2016-03-03
javascript小技巧超強(qiáng)推薦
javascript小技巧超強(qiáng)推薦...
2006-08-08
JS Replace()的高級使用方法介紹
這篇文章介紹了，js中的Replace()的一些高級的使用方法，有需要的朋友可以參考一下
2013-06-06
JS中的數(shù)組轉(zhuǎn)變成JSON格式字符串的方法
這篇文章主要介紹了JS中的數(shù)組轉(zhuǎn)變成JSON格式字符串的方法,需要的朋友可以參考下
2017-05-05
這篇文章主要介紹了JavaScript靜態(tài)作用域和動態(tài)作用域的實例代碼，本文通過文字實例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-06-06