javascript.exe1:图片列表：鼠标移入/移出改变图片透明度

ninthwind

于 2019-04-23 21:00:39 发布

阅读量555

点赞数

分类专栏： javascript入门

本文链接：https://blog.csdn.net/ninthwind/article/details/89481087

版权

javascript入门专栏收录该内容

5 篇文章 0 订阅

订阅专栏

图片列表：鼠标移入/移出改变图片透明度

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html" charset="utf-8">
    <title>
        列表
    </title>
    <style>
        ul li{
            margin:none;
            padding:none;
            list-style-type: none;
        }
        #list ul li.ab img{
            opacity: 0.3;
            filter:alpha(opacity=30);
            cursor: pointer;
        }
        #list ul li img{
            opacity:1;
            filter:alpha(opacity=100);
            cursor: crosshair;
        }
    </style>
    </head>
<body>
    <div id="list">
        <ul>
            <li><img src="1.jpg" alt="这是个图片" id="pic1" title="图"></li>
            
        </ul>
    </div>
</body>
<script type="text/javascript">
    window.onload=function () {
        var as=document.getElementsByTagName("li");
        for(var a=0;a<as.length; a++)
        {
            as[a].onmouseover=function (){
                this.className="ab";
            };
            as[a].onmouseout=function (){
                this.className="";
            }
        }
        
    }
    </script>
</html>