欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JQuery实现图片高亮突出展示

程序员文章站 2022-05-28 21:55:37
...

鼠标移入前和鼠标移出后

JQuery实现图片高亮突出展示

鼠标移入后

JQuery实现图片高亮突出展示

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    body{
        background-color:#000;
    }
    .wrap{
        width:615px;
        height: 400px;
        margin:100px auto 0;
        background-color:#000;
        overflow: hidden;
        border:1px solid #fff;

    }
    .wrap ul{
        list-style: none;
    }
    .wrap ul li{
        float: left;
        margin-right: 5px;
    }
    img{
        width:200px;
        height: 200px;
        border:0;
        display: block;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <ul>
            <li><a href="#"><img src="timg.jpg" alt=""></a></li>
            <li><a href="#"><img src="timg.jpg" alt=""></a></li>
            <li><a href="#"><img src="timg.jpg" alt=""></a></li>
            <li><a href="#"><img src="timg.jpg" alt=""></a></li>
            <li><a href="#"><img src="timg.jpg" alt=""></a></li>
            <li><a href="#"><img src="timg.jpg" alt=""></a></li>
        </ul>
    </div>
    
</body>
</html>
<script src="jquery-3.4.1.min.js"></script>
<script>
    $(function(){
            //需求1:给小人物所在的li标签设置鼠标移入事件;当前li标签透明度为1;其他的兄弟li标签透明度为0.4
            //需求2:鼠标离开大盒子,所有的li标签的透明度变为1;
            
            $(' .wrap').find('li').mouseenter(function(){
                    // console.log($(this).css('opacity',1));//这个css方法有返回值,返回值就是设置的这个方法的元素本身
                    $(this).css('opacity',1).siblings('li').css('opacity',0.4);
            });

            $(' .wrap').mouseleave(function(){
                    // console.log($(this));//在.这个离开时间中,this是整个大盒子
                    $(this).find('li').css('opacity',1);
            });

    });

</script>