MouseOver / MouseOut - MouseEnter / MouseLeave

1. MouseOver / MouseOut : 마우스 커서가 요소에 올렸을때 빠져 나올때의 이벤트, 해당하는 요소와 자식 요소까지 영향을 준다

 

2. MouseEnter / MouseLeave : 해당 요소에만 영향을 주고 자식 요소는 제외된다

코드

 <style>
        #one {
            width: 300px;
            padding: 10px;
            margin: 10px;
            font-size: 30px;
            text-align: center;
            background: #ccc;
        }

        #one p {}

        #two {
            width: 300px;
            padding: 10px;
            margin: 10px;
            font-size: 30px;
            text-align: center;
            background: #ccc;
        }

        #two p {}
     </style>
<div id="one">
		one
        <p>Mouseover / Mouseout</p>
    </div>

    <div id="two">
    	two
        <p>MouseEnter / MouseLeave</p>
    </div>
    
    <script>
        const one = document.querySelector("#one");
        const two = document.querySelector("#two");
        const oneP =  document.querySelector("#one p");
        const twoP =  document.querySelector("#two p");

        one.addEventListener("mouseover", () => {
            oneP.style.background = "#a1ffa4";
        });

        one.addEventListener("mouseout", () => {
            oneP.style.fontSize = "40px";
            oneP.style.border = "1px solid #111";
        });

        
        two.addEventListener("mouseenter", () => {
            twoP.style.background = "#a1ffa4";
        });

        two.addEventListener("mouseleave", () => {
            twoP.style.fontSize = "40px";
            twoP.style.border = "1px solid #111";
        });
    </script>

결과

 

 

one

Mouseover / Mouseout

two

MouseEnter / MouseLeave

1. Mouseover / Mouseout의 경우 마우스를 올려놓으면 텍스트 주변 배경색상이 바뀌고 회색 범위로 마우스를 옮기면 텍스트 크기가 커진다, 자식 태그인 텍스트까지 영향을 준다

 

2. MouseEnter / MouseLeave의 경우 마우스를 어디에 올려놓아도 배경 색상만 변경되며 마우스가 회색 범위 밖까지 벗어날때 텍스트 크기가 커진다, 자식 태그까지 영향을 주지 않는다