如何用JavaScript 编写当鼠标放在某一个带有连接的div下时,其背景色变成自己想要的那种颜色?
<divid="div1"style="height:700px;width:960px;padding:0px;margin:auto"><divstyle="back...
<div id="div1" style="height:700px; width:960px; padding:0px; margin:auto">
<div style="background:#CCC; height:300px; margin-top:25px; width:300px; margin-right:10px; margin-left:20px; float:left"><a href="#" style="border:0"></a></div>
<div style="background:#CCC; height:300px; margin-top:25px;width:300px; margin-right:10px; float:left"><a href="#" style="border:0"></a></div>
<div style="background:#CCC; height:300px; margin-top:25px ;width:300px; margin-right:10px; float:left"><a href="#" style="border:0"></a></div>
<div style="background:#CCC; height:300px; margin-top:35px; width:300px; margin-right:10px; margin-left:20px; float:left"><a href="#" style="border:0"></a></div>
<div style="background:#CCC; height:300px; margin-top:35px;width:300px; margin-right:10px; float:left"><a href="#" style="border:0"></a></div>
<div style="background:#CCC; height:300px; margin-top:35px ;width:300px; margin-right:10px; float:left"><a href="#" style="border:0"></a></div>
<script>
var oDiv1=document.getElementById('div1');
var oDiv2=oDiv1.getElementsByTagName('div');
for (var i=0;i<oDiv2.length;i++)
{
oDiv2[i].onmousrover=function ()
{
this.style['background']='red';
}
}
for (var i=0;i<oDiv2.length;i++)
{
oDiv2[i].onmousrout=function ()
{
this.style['background']='#ccc';
}
}
</script>
当div里放的是图片时该怎么做?谢谢! 展开
<div style="background:#CCC; height:300px; margin-top:25px; width:300px; margin-right:10px; margin-left:20px; float:left"><a href="#" style="border:0"></a></div>
<div style="background:#CCC; height:300px; margin-top:25px;width:300px; margin-right:10px; float:left"><a href="#" style="border:0"></a></div>
<div style="background:#CCC; height:300px; margin-top:25px ;width:300px; margin-right:10px; float:left"><a href="#" style="border:0"></a></div>
<div style="background:#CCC; height:300px; margin-top:35px; width:300px; margin-right:10px; margin-left:20px; float:left"><a href="#" style="border:0"></a></div>
<div style="background:#CCC; height:300px; margin-top:35px;width:300px; margin-right:10px; float:left"><a href="#" style="border:0"></a></div>
<div style="background:#CCC; height:300px; margin-top:35px ;width:300px; margin-right:10px; float:left"><a href="#" style="border:0"></a></div>
<script>
var oDiv1=document.getElementById('div1');
var oDiv2=oDiv1.getElementsByTagName('div');
for (var i=0;i<oDiv2.length;i++)
{
oDiv2[i].onmousrover=function ()
{
this.style['background']='red';
}
}
for (var i=0;i<oDiv2.length;i++)
{
oDiv2[i].onmousrout=function ()
{
this.style['background']='#ccc';
}
}
</script>
当div里放的是图片时该怎么做?谢谢! 展开
2个回答
展开全部
亲,在onmouseover的事件处理函数里面改变style.background就可以了
追问
for (var i=0;i<oDiv2.length;i++)
{
oDiv2[i].onmousrover=function ()
{
this.style['background']='red';
}
}
这样写显示不了的!能帮我写一个比较完整点的答案吗?谢谢啦!
追答
改好了你看一下,你的div1少了结束标
<script type='text/javascript'>
var aDiv=document.getElementById('div1').getElementsByTagName('div');
for(var i=0;i<aDiv.length;i++)
{
aDiv[i].onmouseover=function(){
this.style.background='red';
}
}
for(var i=0;i<aDiv.length;i++)
{
aDiv[i].onmouseout=function(){
this.style.background='#ccc';
}
}
</script>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询