js設置鼠標懸停改變背景色實現(xiàn)詳解
更新時間：2019年06月26日 10:20:42 作者：代 碼 飛 了 `
這篇文章主要介紹了js設置鼠標懸停改變背景色實現(xiàn)詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下
看了網(wǎng)上那么多的js鼠標懸停時事件，大多數(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"; };//鼠標懸停事件
obj.onmouseout=function(){ this.className="out"; };//鼠標離開事件
obj.onmousedown=function(){this.className="down";};//鼠標點擊時觸發(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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
小程序與內(nèi)嵌webview的數(shù)據(jù)交互方案詳解
這篇文章主要介紹了小程序與內(nèi)嵌webview的數(shù)據(jù)交互方案,為實現(xiàn)H5頁面到小程序的無縫切換,技術方案包含使用webview交互,特別是低碼C端表單頁面的處理,需要的朋友可以參考下2024-09-09
JavaScript定時器setTimeout()和setInterval()詳解
這篇文章主要為大家詳細介紹了JavaScript定時器setTimeout()和setInterval()的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
下面小編就為大家?guī)硪黄绾闻袛郕avascript對象是否存在的簡單實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章給大家分享一段實例代碼發(fā)送驗證碼之后開始60S倒計時功能，具體實例代碼大家參考下本文2018-01-01
簡單對比分析JavaScript中的apply,call與this的使用
簡單的說call，apply都屬于Function.prototype的一個方法，它是JavaScript引擎內(nèi)在實現(xiàn)的，因為屬于Function.prototype，所以每個Function對象實例(就是每個方法)都有call，apply屬性。既然作為方法的屬性，那它們的使用就當然是針對方法的了，這兩個方法是容易混淆的2015-12-12
在js中提供數(shù)據(jù)查找了函數(shù)有很多，但我查找了很久都沒有能實現(xiàn)我要的方法，后來發(fā)現(xiàn)可以使用indexOf函數(shù)來實現(xiàn)查找與定位數(shù)組元素索引值的具體方法，各位朋友可參考2016-03-03
javascript小技巧 超強推薦...2006-08-08
這篇文章介紹了，js中的Replace()的一些高級的使用方法，有需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了JS中的數(shù)組轉變成JSON格式字符串的方法,需要的朋友可以參考下2017-05-05