高亮显示图片案例(链式编程)

实现鼠标经过谁就高练度显示，不经过时，全部高亮度显示。

代码:

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高亮显示图片</title>
    <style type="text/css">
    img{width: 230px; height: 230px}
    ul li{float: left}

    </style>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
<h1>高亮度显示图片</h1>
<hr>
<div class="wrap">
    <ul>
        <li><a href="#"><img src="img/ht.png" alt="胡桃"/></a></li>
        <li><a href="#"><img src="img/zl.png" alt="钟离"/></a></li>
        <li><a href="#"><img src="img/x.png" alt="魈"/></a></li>
        <li><a href="#"><img src="img/kl.png" alt="可丽"/></a></li>
        <li><a href="#"><img src="img/yl.png" alt="优菈"/></a></li>
        <li><a href="#"><img src="img/wd.png" alt="温迪"/></a></li>
    </ul>
    </div>
    <script type="text/javascript">
        $(function (){
            $('.wrap>ul>li').mouseover(function (event){
                $(this).css('opacity',1).siblings('li').css('opacity',0.2); //值越小越看不见
            });
            $('.wrap>ul>li').mouseout(function (event){
                $(this).parent().children().css('opacity',1);    //正常显示
            });
        });
    </script>
</body>
</html>
运行结果:


 当鼠标不进过时：

 

 案例所用图片:

 

posted @ 2022-03-28 21:07  努力学爪哇  阅读(86)  评论(0)  编辑  收藏  举报