javascript悬停,HTML悬停

JavaScript 怎么一次创建两个事件，比如鼠标悬停改变背景颜色和字体颜色？

举个粟子，写一个段落“鼠标悬停时把字体颜色变成红色，背景颜色变成灰色，离开时恢复”：

代码如下:

!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

以下是运行效果截图：

代码截图

悬停前和离开后

动图

代码说明：这里面确实一次为这个段落创建了两个事件，都是DOM通用的事件，一个叫mouseover(鼠标悬停)，一个叫mouseout（鼠标离开），mouseover事件触发时要用到2个函数（function）, 分别是chfgcolor和chbgcolor, 而mouseout只用到1个chback函数。

还有，事件触发时会运行一些东西，但是不一定是函数。

js鼠标悬停事件

第一：js进行鼠标悬停事件来处理DOM实际上是不合理的。对于界面交互上能通过css处理的事件就不要用js来处理；

第二：恰好css对于鼠标悬停是有对应的选择器及其处理；

处理方法：如图A：

假设A的id为a，css代码如下：

#a{

    width:100px;

    height:36px;

    float:left;

}

//对于位置的固定可以自行选择处理,当前用float固定。

#a:hover{

    width:200px

}

结果将会如你图中所需要的完成。

如必须用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是个参数 把这个参数传到change(t)这个函数中 然后把t用参数替换掉，这里的意思是鼠标碰到那个 相应的现实窗口就出现*/

}

function to(m) {

p = m;/* 这里就是说当鼠标离开某个DIV的时候再把参数传到to()函数里，然后把参数的值给P 覆盖掉原来的P的值 这里的作用就是让鼠标离开后继续按照你离开后的地方继续切换*/

tt = setInterval(auto, 500);/*这里是让他继续切换*/

}

function auto() {/*这个函数作用就是一开始的自动切换*/

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++; }/*当切换到没了 从头开始*/

}

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

window.onload = auto;/* 这里不用多说了吧*/

/script

/div

/body