JQuery-突出展示

突出展示

HTML样式

 <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        body {
            background: #000;
        }

        .wrap {
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }

        .wrap li {
            float: left;
            margin: 0 10px 10px 0;
        }

        .wrap img {
            display: block;
            border: 0;
        }
    </style>
    <script src="../js/jquery-1.12.4.js"></script>

HTML结构

<div class="wrap">
        <ul>
            <li><a href="#"><img src="images/01.jpg" alt="" /></a></li>
            <li><a href="#"><img src="images/02.jpg" alt="" /></a></li>
            <li><a href="#"><img src="images/03.jpg" alt="" /></a></li>
            <li><a href="#"><img src="images/04.jpg" alt="" /></a></li>
            <li><a href="#"><img src="images/05.jpg" alt="" /></a></li>
            <li><a href="#"><img src="images/06.jpg" alt="" /></a></li>
        </ul>
    </div>

JQ代码

<script>
        //获取li元素
        //给li元素添加移入移出事件,
        //让当前li元素突出显示,其他li元素透明度变暗
        $(function () {
            $('li').mouseenter(function () {
                $(this).css('opacity', 1)
                $(this).siblings().css('opacity', 0.3)
            })
            $('.wrap').mouseleave(function () {
                $(this).find('li').css('opacity', 1)
            })
        })
        //1. mouseover与mouseout是一对事件，当鼠标经过当前元素或者当前元素的子元素的时候，mouseover事件都会触发【事件冒泡】。
// 2. mouseenter 与mouseleave是一对事件，只有当鼠标经过当前元素时，事件会触发，鼠标经过子元素，mousenter事件是不会触发的。
    </script>