JQuery实现图片高亮突出展示

最新推荐文章于 2021-10-20 14:47:52 发布

gxgalaxy

最新推荐文章于 2021-10-20 14:47:52 发布

阅读量2.9k

点赞数 7

分类专栏： JQuery

本文链接：https://blog.csdn.net/gxgalaxy/article/details/102990767

版权

JQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

鼠标移入前和鼠标移出后

在这里插入图片描述

鼠标移入后

在这里插入图片描述

代码

<!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(){
            //需求１：给小人物所在的li标签设置鼠标移入事件；当前li标签透明度为１；其他的兄弟li标签透明度为0.4
            //需求２：鼠标离开大盒子，所有的li标签的透明度变为１；
            
            $(' .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>

gxgalaxy

关注

7
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现图片高亮突出展示

鼠标移入前和鼠标移出后鼠标移入后代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
复制链接

扫一扫