实现鼠标滑过文字信息动态出现

最新推荐文章于 2024-07-11 11:47:04 发布

乌龟不背壳

最新推荐文章于 2024-07-11 11:47:04 发布

阅读量467

点赞数

分类专栏： Js学习日志

本文链接：https://blog.csdn.net/nalan77/article/details/85379738

版权

Js学习日志专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标滑过文字信息动态出现</title>
    <style>
        *{margin: 0;padding: 0;}
        ul,ol{list-style: none;}
        *, *:after, *:before{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
        .clearfix:after{content: ".";height: 0;overflow: hidden;display: block;clear: both;}
        *html .clearfix{height: 1%;}
        .imgtxt li{position: relative;float: left;width: 400px;height: 400px;margin-right: 20px;color: #ccc;line-height: 1.8em;cursor: pointer;transition: all 1s;overflow: hidden;}
        .imgtxt li img{width: 100%;}
        .imgtxt li h2{margin: 30px 0 20px 0;font-weight: normal;font-size: 16px;}
        .imgtxt li p{font-size: 18px;}
        .imgtxt .text{position: absolute;left: -9999px;top: 0;width: 100%;height: 400px;padding-top: 50px;padding-left: 30px; background: rgba(0,0,0,.5);}
    </style>
    <script src="js.js"></script>
</head>
<body>
    <ul class="imgtxt" id="imgtxt">
        <li>
            <img src="images/img1.jpg" alt="">
            <div class="text">
                <h1>卜算子·我住长江头</h1>
                <h2>宋代：李之仪</h2>
                <p>我住长江头，君住长江尾。<br>日日思君不见君，共饮长江水。<br>此水几时休，此恨何时已。<br>只愿君心似我心，定不负相思意。</p>
            </div>
        </li>
        <li>
            <img src="images/img2.jpg" alt="">
            <div class="text">
                <h1>唐多令|惜别</h1>
                <h2>吴文英</h2>
                <p>何处合成愁？离人心上秋。<br>纵芭蕉不雨也飕飕。都道晚凉天气好；有明月，怕登楼。<br>年事梦中休，花空烟水流。<br>燕辞归、客尚淹留。垂柳不萦裙带住，漫长是、系行舟。</p>
            </div>
        </li>
        <li>
            <img src="images/img3.jpg" alt="">
            <div class="text">
                <h1>清明日对酒</h1>
                <h2>宋代：高翥</h2>
                <p>南北山头多墓田，清明祭扫各纷然。<br>纸灰飞作白蝴蝶，泪血染成红杜鹃。<br>日落狐狸眠冢上，夜归儿女笑灯前。<br>人生有酒须当醉，一滴何曾到九泉。</p>
            </div>
        </li>
    </ul>
</body>
</html>

window.onload=function(){
    var imgtxt=document.getElementById("imgtxt");
    var lis=imgtxt.getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
        (function(arg){
            lis[arg].onmouseover=function(){
                var text=lis[arg].getElementsByClassName("text")[0];
                text.style.left="0px";
            };
            lis[arg].onmouseout=function(){
                var text=lis[arg].getElementsByClassName("text")[0];
                text.style.left="-9999px";
            };
        })(i);
    }
}

匿名函数和函数闭包，用css也可以实现效果……