.　jQuery

[jQuery] API Documentation : .click() 예제 연습

박인영 2021. 8. 21. 13:36

[jQuery] API Documentation : .click()
https://api.jquery.com/click/

 

Examples [1]
Hide paragraphs on a page when they are clicked.
(1) p 태그의 글자색은 red, 마진 5px, 커서를 pointer
(2) p 태그에 마우스를 올릴때만 배경색을 yellow
(3) P 태그를 클릭하면 .slideUp()으로 화면에서 사라지게 함

▼ 예제 상세 보기 및 답안
https://api.jquery.com/click#example-0

 

▼ 나의 풀이
- 호버 효과를 내려면  mouseenter + mouseleave 같이 써야 하는 걸까?

　(선생님: .hover() 있음)

- mouseover랑 mouseenter는 같은 걸까?

　(선생님: 비슷하지만 다름. mouseover 쓰지말고 mouseenter 써야함)

<body>
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
    <p>Yet one more Paragraph</p>
    <script>
        $(function() {
            $("p")
            .css("color", "red")
            .css("margin", "5px")
            .css("cursor", "pointer")
            .on("mouseenter", function() {
                $(this).css("background-color", "yellow")
            })
            .on("mouseleave", function() {
                $(this).css("background-color", "")
            })
            .click(function() {
                $(this).slideUp()
            })
        });
    </script>
</body>

 

댓글수0