码迷,mamicode.com
首页 > 其他好文 > 详细

当鼠标指向时覆盖阴影的代码

时间:2016-08-20 16:20:15      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:

<style>
#a
{
width:100%;
height:415px;
border:1px solid red;
position:relative;}
.aa
{
width:20%;
height:200px;
margin-left:4%;
float:left;
margin-top:5px;
background-color:#0F6;
position:relative;}
.b
{
width:100%;
height:200px;
position:relative;
background-color:#000;
opacity:0.4;
visibility:hidden;}
#w
{
position:relative;
top:-180px;
visibility:hidden;
}
</style>
</head>

<body>
<div id="a">
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
</div>
</body>
</html>
<script>
var all=document.getElementsByClassName("aa");
for(var i=0;i<all.length;i++)
{
all[i].onmouseover=function(){this.firstChild.style.visibility="visible"}
all[i].onmouseout=function(){this.firstChild.style.visibility="hidden"}
}

当鼠标指向时覆盖阴影的代码

标签:

原文地址:http://www.cnblogs.com/fuze/p/5790518.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!