请问div随鼠标的移动改变颜色 语句解释 多谢
日期：2014-05-16 浏览次数：20347 次
请教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这个是干嘛的意思呢 截取吗[color=#FF0000][/color]
{
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>
谢谢 高手给解释
------解决方案--------------------
楼主同志这样就可以了
<!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';
}
如题 不都解释 有几句不明白 简要的看过就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这个是干嘛的意思呢 截取吗[color=#FF0000][/color]
{
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>
谢谢 高手给解释
------解决方案--------------------
楼主同志这样就可以了
<!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';
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
