请教div随鼠标的移动改变颜色语句解释谢谢

如题不都解释有几句不明白简要的看过就js 看到例子还是有点发蒙
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div随着鼠标的移动改变颜色示例</title>
<style type="text/css" media="all">
body
{
color:#000;
}
.dreamdu:hover,.hover                                  这个好像是没实现吧 {
background: #4870CB;
color: #faf;
}
div
{
width:300px;margin:10px;border:1px solid green;
}
</style>
<script type="text/javascript">
/*
* 功能：使div的背景随着鼠标的移动改变颜色
* 作者：可爱的猴子 www.dreamdu.com/blog/
*/
function DreamduColorfulDiv()
{
var dreamdurows = document.getElementsByTagName('div');
for ( var i = 0; i < dreamdurows.length; i++ )
{
if ( 'dreamdu' != dreamdurows[i].className.substr(0,7) ) ~~2这个是干嘛的意思呢截取吗~~
{
continue;                             这句是去哪了？
}
if ( navigator.appName == 'Microsoft Internet Explorer' )
{
// ie不支持 :hover，所以...
dreamdurows[i].onmouseover = function()       这句往下就不明白了尤其hover this classname {
this.className += ' hover';
}

dreamdurows[i].onmouseout = function()
{
this.className = this.className.replace( ' hover', '' );
}
}
}
}
window.onload=DreamduColorfulDiv;
</script>
</head>
<body>
<div class="dreamdu"><a href="http://www.dreamdu.com/javascript/">JavaScript教程</a><a href="http://www.dreamdu.com/xhtml/tag_div/">div</a>标签</div>
<div>这个没有改变颜色。</div>
<div class="dreamdu">颜色随着鼠标的指向在变。</div>
</body>
</html>
谢谢高手给解释

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

楼主同志这样就可以了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div随着鼠标的移动改变颜色示例 </title>
<style type="text/css" media="all">
body
{
color:#000;
}
.dreamdu:hover,.hover                                  这个好像是没实现吧 {
background: #4870CB;
color: #faf;
}
div
{
width:300px;margin:10px;border:1px solid green;
}
</style>
<script type="text/javascript">
/*
* 功能：使div的背景随着鼠标的移动改变颜色
* 作者：可爱的猴子 www.dreamdu.com/blog/
*/
function DreamduColorfulDiv()
{
var dreamdurows = document.getElementsByTagName('div');
for ( var i = 0; i < dreamdurows.length; i++ )
{
if ( 'dreamdu' != dreamdurows[i].className.substr(0,7) ) //2这个是干嘛的意思呢截取吗
{
continue;                            这句是去哪了？
}
if ( navigator.appName == 'Microsoft Internet Explorer' )
{
// ie不支持 :hover，所以...
dreamdurows[i].onmouseover = function()     // 这句往下就不明白了尤其hover this classname
{
this.className += ' hover';
}

dreamdurows[i].onmouseout = function()
{
this.className = this.className.replace( ' hover', '' );
}
}
}
}
window.onload=DreamduColorfulDiv;
</script>
</head>
<body>
<div class="dreamdu"> <a href="http://www.dreamdu.com/javascript/">JavaScript教程 </a> <a href="http://www.dreamdu.com/xhtml/tag_div/">div </a>标签 </div>
<div class="dreamdu">这个没有改变颜色。 </div>
<div class="dreamdu">颜色随着鼠标的指向在变。 </div>
</body>
</html>
下次不要正这么长得代码出来
'dreamdu' != dreamdurows[i].className.substr(0,7)
这句话就是判断div的样式表是不是 dreamdu
但是我感觉没有必要这样判断this 代表你操作的当前元素
首先看这句，window.onload=DreamduColorfulDiv; //当页面加载完毕时调用函数DreamduColorfulDiv()；
函数DreamduColorfulDiv对于className为"dreamdu"的div，设置其onmouseover,和onmouseout事件。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div随着鼠标的移动改变颜色示例 </title>
<style type="text/css" media="all">
body
{
color:#000;
}
.dreamdu:hover,.hover
{
background: #4870CB;
color: #faf;
}
div
{
width:300px;margin:10px;border:1px solid green;
}
</style>
<script type="text/javascript">
/*
* 功能：使div的背景随着鼠标的移动改变颜色
* 作者：可爱的猴子 www.dreamdu.com/blog/
*/
function DreamduColorfulDiv()
{
var dreamdurows = document.getElementsByTagName('div');
for ( var i = 0; i < dreamdurows.length; i++ )
{
if ( 'dreamdu' != dreamdurows[i].className.substr(0,7) ) //判断div标签的className是不是"dreamdu"
//用substr的意图是如果后面有空格也算相等。
{
continue;  这次for循环结束，进入下一次。比如现在i=1;它不会执行下面的语句，而是跳到for循环开头执行i++;
}
if ( navigator.appName == 'Microsoft Internet Explorer' )
{
// ie不支持 :hover，所以...
dreamdurows[i].onmouseover = function()      //注册事件
{
this.className += ' hover';  把className变为"dreamdu hover";
} dreamdurows[i].onmouseout = function()
{
this.className = this.className.replace( ' hover', '' ); //className变为"dreamdu"；
}
}
}
}
window.onload=DreamduColorfulDiv;
</script>
</head>
<body>
<div class="dreamdu"> <a href="http://www.dreamdu.com/javascript/">JavaScript教程 </a> <a href="http://www.dreamdu.com/xhtml/tag_div/">div </a>标签 </div>
<div>这个没有改变颜色。 </div>
<div class="dreamdu">颜色随着鼠标的指向在变。 </div>
</body>
</html>
substr(index1,index2) 这方法是截取返回index1至index2字符串内容（其中包含index1,不包含index2）
continue 表示继续，在你上面代码里意思就是继续往下走，直接到下1个if语句了。感觉这个continue用的不好```
this 可以使你直接引用对象，可以解决可能在实例变量和局部变量之间任何同名引起的冲突。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div随着鼠标的移动改变颜色示例 </title>
<style type="text/css" media="all">
body //定义body样式
{
    color:#000;
} ,.dreamdu:hover,.hover {//这里的这个样式似乎写错了,应该是.dreamdu{} ,.dreamdu是一个类选择器,在标签中使用class="dreamdu"来使用这个样式
    background: #4870CB; //背景色
    color: #faf;
} div //定义div样式{
    width:300px;//宽为300px
    margin:10px;//上边缘留10px
    border:1px solid green; //边框1px加细绿色
}
</style>
<script type="text/javascript">
/*
* 功能：使div的背景随着鼠标的移动改变颜色
* 作者：可爱的猴子 www.dreamdu.com/blog/
*/
function DreamduColorfulDiv() {
    var dreamdurows = document.getElementsByTagName('div'); //根据标签名称来取得div对象,注意返回的是所有div类型的对象,所以是一个数组
for ( var i = 0; i < dreamdurows.length; i++ ) {  //遍历dreamdurows数组 if ( 'dreamdu' != dreamdurows[i].className.substr(0,7) ){  //截取数组中每个元素的样式名称是否为'dreamdu',substr(0,7)的意思是截取从第0个字符,长度为7个字符
continue;//如果不等,则跳出,直接进行下一次循环(不会执行下面的代码了)
}//end of if if ( navigator.appName == 'Microsoft Internet Explorer' ){ //判断是否为IE
// ie不支持 :hover，所以...
dreamdurows[i].onmouseover = function(){//为数组中的元素添加事件onmouseover
this.className += ' hover'; //这个好像是css中的伪类，具体用法我也不清楚，可以问下google :)
} dreamdurows[i].onmouseout = function() { //为数组中的元素添加事件onmouseout
this.className = this.className.replace( ' hover', '' ); //将样式中的'hover'替换成''
}
}//end of if
} //end of for
} //end of function DreamduColorfulDiv()
window.onload=DreamduColorfulDiv; //页面加载时调用DreamduColorfulDiv
</script>
</head>
<body>
<div class="dreamdu"> <a href="http://www.dreamdu.com/javascript/">JavaScript教程 </a> <a href="http://www.dreamdu.com/xhtml/tag_div/">div </a>标签 </div>
<div>这个没有改变颜色。 </div>
<div class="dreamdu">颜色随着鼠标的指向在变。 </div>
</body>
</html> 有些样式的处理和使用不太懂,还是等高手来吧:)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div随着鼠标的移动改变颜色示例 </title>
<style type="text/css" media="all">
body
{
color:#000;
}
.dreamdu:hover,.hover                                  这个好像是没…
6楼说得非常详细了，补充一下吧
className += ' hover'
表示增加样式hover（就是上面的 .hover 定义的）。
className可以指定多个，用空格分隔，这样就可以应用多个样式
恩截取这个意思了解可是i是什么值呢 dreamdurows(1)与dreamdurows(2)有什么区别
hover 呢他是干嘛使的呵呵谢谢
谢谢你给讲解的顺序明白了我还迷糊在注册时间后把他编程dream hover？？？为啥
呵呵不行就这乍就没通络呢没明白classname的样式在哪分隔？？
举个例子吧<style>
.style1{
color:yellow;
}
.style2{
background-color:black;
}
</style>
<div class="style1 style2">测试</div>同时对该DIV使用 style1 和 style2
哦其实没有this也可以呗只是他怕同名才出现的呗
对啊， this只是个习惯。而且this不是打着也简单么```
对啊， this只是个习惯。而且this不是打着也简单么```

请教div随鼠标的移动改变颜色 语句解释 谢谢

解决方案 »

请教div随鼠标的移动改变颜色语句解释谢谢