jQuery選擇器 標籤選擇元素+css簡單新增移除操作

努力尋找活著發表於2017-07-26
jQueryCSS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery選擇器</title>
    <!--jQuery選擇器類似於CSS選擇器 具體規則見：http://jquery.cuishifeng.cn/-->
    <style>
        img{

            border: 1px solid gray;
            width: 200px;
            height: 200px;
            margin: 10px;
        }
        .a{
            border: 3px dotted green;
        }
    </style>
    <script src="../../../js/jquery-3.1.1.min.js"></script>
    <script>
        $(function(){
            //選擇元素，新增事件    直接在$後面的（''）中輸入要操作的元素
            $('img').mouseover(function(){//當滑鼠懸浮時 為img新增a類
                //$(this).css('border','5px solid red');
                $(this).addClass('a');
            }).mouseout(function(){//當滑鼠移開時刪除a類
                //$(this).css('border','10px solid orange');
                $(this).removeClass('a')
            })
        })
    </script>
</head>
<body>
<img src="../../../img/01.jpg" alt=""/>
<img src="../../../img/02.jpg" alt=""/>
<img src="../../../img/03.jpg" alt=""/>
</body>

</html>

相關文章