this应用--多元素显示隐藏

一、效果图。

二、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();
            }
            
        
        });
        
    
    });

本文出自 “帅帅” 博客，谢绝转载！