特别显示

来源:互联网 发布:js展开收起效果 编辑:程序博客网 时间:2024/04/27 07:22
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .wrap{
                width: 660px;
                height: 420px;
                background: #000000;
                margin: 0 auto;
                padding: 1px;
            }
            li{
                float: left;
                list-style: none;
                margin: 2px;
            }
            
        </style>
        <script src="../js/jquery-1.11.1.js"></script>
        <script>
            $(document).ready(function(){
                $("li").mouseenter(function(){
                    
                    $(this).css("opacity",1).siblings().css("opacity",0.6);
                })
                
                //给div添加离开事件
                $("div").mouseleave(function(){
                    //
                     $(this).children("ul").eq(0).children("li").css("opacity",1);
                    
                });
                
            })
        </script>
    </head>
    <body>
        <div class="wrap">
            <ul>
                <li>
                    <img src="images/01.jpg" />
                </li>
                <li>
                    <img src="images/02.jpg" />
                </li>
                <li>
                    <img src="images/03.jpg" />
                </li>
                
                
                <li>
                    <img src="images/04.jpg" />
                </li>
                <li>
                    <img src="images/05.jpg" />
                </li>
                <li>
                    <img src="images/06.jpg" />
                </li>
            </ul>
        </div>
    </body>

</html>

***************************************************************无图片版

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .d{
                width: 520px;
                margin-left: 252px;
                height: 420px;
                background: #f89;
                
                padding: 1px;
            }
            div{
                float: left;
                background: #fff;
                width: 100px;
                height: 100px;
                list-style: none;
                margin: 2px;
            }
        </style>
        <script type="text/javascript" src="js/js/jquery-1.11.1.min.js" ></script>
        <script>
            $(document).ready(function(){
                $("div").mouseenter(function(){
                    
                    $(this).css("background-color","red").siblings().css("background-color","chartreuse");
                });
                //给div添加离开事件
                $(".d").mouseleave(function(){
                    //
                     $(this).children("div").css("background-color","#FFFFFF");
                     $(".d").css("background-color","#F89");
                    
                });
                
                
            });
        </script>
    </head>
    <body>
        <div class="d" >
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
        </div>
    </body>
</html>