js設置鼠標懸停改變背景色實現詳解
更新時間：2019年06月26日 10:20:42 作者：代 碼 飛 了 `
這篇文章主要介紹了js設置鼠標懸停改變背景色實現詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下
看了網上那么多的js鼠標懸停時事件，大多數的，說了那么多話，也沒解決什么問題，現在直接貼上代碼，以供參考
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');
});
});
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
TextRange是用來表現HTML元素中文字的對象，是一個用于處理JavaScript對象文本部分內容的一個對象2014-07-07
在WEB程序開發(fā)中經常會見到用倒計時限制用戶對表單的操作，希望用戶在規(guī)定的時間內閱讀完協議信息才允許用戶繼續(xù)下一步操作，本文通過兩種場景分析js實現自動倒計時30秒后按鈕才可用，小伙伴快來學習吧2015-08-08
這篇文章主要介紹了如何使用JavaScript修改瀏覽器URL地址欄，需要的朋友可以參考下2013-10-10
本文主要介紹了echarts折線圖每段顯示不同的顏色的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-09-09
今天小編就為大家分享一篇layui對工具條進行選擇性的顯示方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了JavaScript設計模式之命令模式,結合實例形式分析了javascript命令模式的概念、原理、用法及相關注意事項,需要的朋友可以參考下2019-01-01
在javascript前端開發(fā)階段經常會遇到this，閉包，原型鏈知識，那么大家對這三種的基本知識理解嗎？今天小編就帶領大家一起學習this，閉包，原型鏈的知識，感興趣的朋友一起看看吧2016-09-09
最近需要在瀏覽器端實現excel數據的粘貼，一開始去找獲取剪貼板數據的方法。但是在瀏覽器端，JS去取是受安全限制的。2009-07-07
現在不會用Promise都不好意思說自己是前端,下面這篇文章主要給大家介紹了關于JavaScript中Promise使用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了JavaScript設計模式之命令模式，對設計模式感興趣的同學，可以參考下2021-04-04