자바스크립트

hover, addClass, removeClass

유호야 2020. 11. 8. 22:22
반응형

hover 를 click 으로 바꾸면 작동하지 않는다.

즉 아마? hover 는 addClass, removeClass와 함께 쓰일 때 적용되고
click은 addClass, removeClass를 둘이 동시에 사용할 수 없다. addClass만 사용할 때 가능

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            #box {
                width : 100px;
                height : 100px;
                background-color : red;
            }
            #box.hover{
                background-color: blue;
                border-radius: 50px;
            }
        </style>
        <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

        <script>
            $(document).ready(function () {
                $('#box').click(function () {
                   $('#box').addClass('hover');
                }, function(){
                    $('#box').removeClass('hover');
                });
            });
        </script>
    </head>
    <body>
        <div id = "box"></div>
    </body>
</html>
반응형