图片突出显示案例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);            })        });