图片突出显示案例html+css+jquery

 首先设置html内容和css样式

一个box盒子里面包含ul  ul里面有 8个li标签，每个li标签中有包含img图像标签

小技巧：     .box>ul>li*8>img     (快捷方式)     就会有如下所示代码，简化操作

        <ul>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
        </ul>

html+css样式：

<div class="box">
        <ul>
            <li>
                <img src="images/1.jpg" alt="">
            </li>
            <li>
                <img src="images/2.jpg" alt="">
            </li>
            <li>
                <img src="images/3.jpg" alt="">
            </li>
            <li>
                <img src="images/4.jpg" alt="">
            </li>
            <li>
                <img src="images/5.jpg" alt="">
            </li>
            <li>
                <img src="images/6.jpg" alt="">
            </li>
            <li>
                <img src="images/7.jpg" alt="">
            </li>
            <li>
                <img src="images/8.jpg" alt="">
            </li>
        </ul>

    </div>

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
            float: left;
        }
        
        div {
            box-sizing: border-box;
        }
        
        .box {
            width: 810px;
            height: 450px;
            background-color: #000;
            margin: 0 auto;
        }
        
        li {
            overflow: hidden;
            width: 190px;
            height: 210px;
            margin-left: 10px;
            margin-top: 10px;
        }
        
        li img {
            /* width: 100%; */
            height: 100%;
        }
        /* 以下是调整图片在li标签中的位置，如果图片位置合适，可以不用写 */
        
        ul li:first-child img {
            margin-left: -39px;
        }
        
        ul li:nth-child(2) img {
            margin-left: -81px;
            margin-top: 1px;
        }
        
        ul li:nth-child(5) img {
            margin-left: -104px;
            margin-top: 1px;
        }
        
        ul li:last-child img {
            margin-left: -81px;
            margin-top: 1px;
        }
    </style>

jquery代码这部分

首先引入jquery.min.js文件

再写其他script代码

第一种方法：

1、当鼠标移入ul中的li里面的时候，先让他自己快速用fadeTo()方法变亮。再让其他的（他的亲兄弟）变暗。

2、变亮第一次可以不用，如果不写的话，第二次移动到li上时，所有的都变暗。如图所示

3、用stop() 方法可以避免"排队"的现象发生

 

    <script src="jquery.min.js"></script>
    <script>
        // 入口函数
        $(function() {
            // 当鼠标移入ul中的li里面的时候，先让他自己快速用fadeTO()方法，变亮，再让其他的变暗
            // 变亮第一次可以不用。如果不写的话，第二次移动到li上时，所有的都变暗
            // 用stop() 方法可以避免"排队"的现象发生
            // （通俗来讲就是，快速移动多次，鼠标不移动了，页面上的效果还在移动）
            $('ul li').mouseenter(function() {
                $(this).stop().fadeTo(1, 1).siblings().stop().fadeTo(200, 0.5);
            });
            // 当鼠标离开大盒子时，就让他的所有的li"子孙"变亮，这里用的是find()放法
            $('.box').mouseleave(function() {
                $(this).find('li').fadeTo(300, 1);
            });

        });
        

第二种方法：

用hover() 方法，
里面写两个函数， 就是经过时执行第一个里面的内容， 离开时执行第二个里面的内容
里面写一个函数， 就是经过离开这个执行一次里面的函数， 类似于toggle

        // 方法二 用hover() 方法，
        // 里面写两个函数， 就是经过时执行第一个里面的内容， 离开时执行第二个里面的内容
        // 里面写一个函数， 就是经过离开这个执行一次里面的函数， 类似于toggle
        $(function() {
            $('ul li').hover(function() {
                $(this).siblings().fadeTo(300, .5);
            }, function() {
                $(this).siblings().fadeTo(1, 1);
            })
        });