一、效果图。
二、HTML+CSS代码。
<style>
.box{ width:600px; margin:90px auto;}
.game_list li{ width:72px; height:72px; position:relative; float:left; margin-left:20px; cursor:pointer; overflow:visible; margin-bottom:20px;}
.game_list li div{ position:absolute; left:0; top:-60px; width:120px; height:60px; background:#ccc; z-index:100; line-height:40px; color:#fff; font-size:18px; text-align:center; display:none;}
</style>
<div class="box">
<ul id="game_list" class="game_list">
<li>
<img src="img/icon11.png" alt="" />
<div>游戏介绍一</div>
</li>
<li>
<img src="img/icon12.png" alt="" />
<div>游戏介绍二</div>
</li>
<li>
<img src="img/icon13.png" alt="" />
<div>游戏介绍三</div>
</li>
<li>
<img src="img/icon14.png" alt="" />
<div>游戏介绍四</div>
</li>
<li>
<img src="img/icon15.png" alt="" />
<div>游戏介绍五</div>
</li>
<li>
<img src="img/icon16.png" alt="" />
<div>游戏介绍六</div>
</li>
<li>
<img src="img/icon11.png" alt="" />
<div>游戏介绍七</div>
</li>
<li>
<img src="img/icon12.png" alt="" />
<div>游戏介绍八</div>
</li>
<li>
<img src="img/icon13.png" alt="" />
<div>游戏介绍九</div>
</li>
<li>
<img src="img/icon14.png" alt="" />
<div>游戏介绍十</div>
</li>
<li>
<img src="img/icon15.png" alt="" />
<div>游戏介绍十一</div>
</li>
<li>
<img src="img/icon16.png" alt="" />
<div>游戏介绍十二</div>
</li>
</ul>
</div>
三、javaScript代码。
var oUl = document.getElementById('game_list');
var aLi =oUl.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i]. = function(){
this.getElementsByTagName('div')[0].style.display='block';
}
aLi[i]. = function(){
this.getElementsByTagName('div')[0].style.display='none';
}
}
四、jquery代码。
$('#game_list li').each(function(i,elem){
$(elem).on({
'mouseover':function(){
$(elem).find('div').eq(0).show();
},
'mouseout':function(){
$(elem).find('div').eq(0).hide();
}
});
});
转载于:https://blog.51cto.com/guoweishuai/1564817