JavaScript 怎么一次創(chuàng)建兩個事件，比如鼠標懸停改變背景顏色和字體顏色？

舉個粟子，寫一個段落“鼠標懸停時把字體顏色變成紅色，背景顏色變成灰色，離開時恢復(fù)”：

創(chuàng)新互聯(lián)10多年企業(yè)網(wǎng)站設(shè)計服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及高端網(wǎng)站定制服務(wù),企業(yè)網(wǎng)站設(shè)計及推廣,對高空作業(yè)車租賃等多個領(lǐng)域擁有多年的營銷推廣經(jīng)驗的網(wǎng)站建設(shè)公司。

代碼如下:

!DOCTYPE html

html

head

meta charset="utf-8"

title會變色的段落/title

script

function chfgcolor(){

var e=document.getElementById("demo");

e.style.color="red";

}

function chbgcolor(){

var e=document.getElementById("demo");

e.style["background-color"]="grey";

}

function chback(){

var e=document.getElementById("demo");

e.style="color:#000000; background-color:#ffffff;"

}

/script

/head

body

p id="demo" onmouseover="chfgcolor();chbgcolor();" onmouseout="chback();"這是一會變色的段落/p

/body

/html

以下是運行效果截圖：

代碼截圖

懸停前和離開后

動圖

代碼說明：這里面確實一次為這個段落創(chuàng)建了兩個事件，都是DOM通用的事件，一個叫mouseover(鼠標懸停)，一個叫mouseout（鼠標離開），mouseover事件觸發(fā)時要用到2個函數(shù)（function）, 分別是chfgcolor和chbgcolor, 而mouseout只用到1個chback函數(shù)。

還有，事件觸發(fā)時會運行一些東西，但是不一定是函數(shù)。

js鼠標懸停事件

第一：js進行鼠標懸停事件來處理DOM實際上是不合理的。對于界面交互上能通過css處理的事件就不要用js來處理；

第二：恰好css對于鼠標懸停是有對應(yīng)的選擇器及其處理；

處理方法：如圖A：

假設(shè)A的id為a，css代碼如下：

#a{

width:100px;

height:36px;

float:left;

}

//對于位置的固定可以自行選擇處理,當前用float固定。

#a:hover{

width:200px

}

結(jié)果將會如你圖中所需要的完成。

如必須用JS處理的話，代碼如下：

//既定a的樣式已明確：

//html代碼:

span?id='a'?onmouseover="fc1(this)"

onmouseout="fc2(this)"/span

script

function?fc1(node){

node.style.width?=?'200px';

}

function?fc2(node){

node.style.width?=?'100px';

}

/script

JavaScript 鼠標懸停及自動切換的問題! 謝謝

head

title/title

style

.cc{ margin-left:5px; float:left; background-color:#999999; width:20px; height:20px;}

.tt{ clear:both; display:none; width:100px; height:100px;}

#t1{ background-color:#ff0000;}

#t2{background-color:Yellow;}

#t3{background-color:Black;}

#t4{background-color:Blue;}

/style

/head

body

div id="body"

div id="c1" class="cc" onmouseover="change(1)" onmouseout="to(1)"1/div

div id="c2" class="cc" onmouseover="change(2)" onmouseout="to(2)"2/div

div id="c3" class="cc" onmouseover="change(3)" onmouseout="to(3)"3/div

div id="c4" class="cc" onmouseover="change(4)" onmouseout="to(4)"4/div

div id="t1" class="tt"/div

div id="t2" class="tt"/div

div id="t3" class="tt"/div

div id="t4" class="tt"/div

script/* "id"是元素名 就是每個DIV都有一個自己的名字*/

var p=1;

function change(t) {

clearInterval(tt);/*清除一個叫tt的interval 就是說當我鼠標停在上面的時候停止切換*/

for (k = 1; k = 4; k++) { document.getElementById("t" + k).style.display = "none"; }/*初始化 使每一個自動切換的窗口消失*/

document.getElementById("t" + t).style.display = "block";/*onmouseout="to(x)"中的x是個參數(shù) 把這個參數(shù)傳到change(t)這個函數(shù)中 然后把t用參數(shù)替換掉，這里的意思是鼠標碰到那個 相應(yīng)的現(xiàn)實窗口就出現(xiàn)*/

}

function to(m) {

p = m;/* 這里就是說當鼠標離開某個DIV的時候再把參數(shù)傳到to()函數(shù)里，然后把參數(shù)的值給P 覆蓋掉原來的P的值 這里的作用就是讓鼠標離開后繼續(xù)按照你離開后的地方繼續(xù)切換*/

tt = setInterval(auto, 500);/*這里是讓他繼續(xù)切換*/

}

function auto() {/*這個函數(shù)作用就是一開始的自動切換*/

for (k = 1; k = 4; k++) { document.getElementById("t" + k).style.display = "none"; }/*初始化*/

document.getElementById("t" + p).style.display = "block";

if (p 3) { p = 1; } else { p++; }/*當切換到?jīng)]了 從頭開始*/

}

var tt = setInterval(auto, 500);/* 這里是定義 interval*/

window.onload = auto;/* 這里不用多說了吧*/

/script

/div

/body

網(wǎng)頁名稱：javascript懸停,HTML懸停
文章源于：http://chinadenli.net/article7/dsehooj.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、企業(yè)網(wǎng)站制作、動態(tài)網(wǎng)站、電子商務(wù)、微信小程序、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)