[Event-onmouseover 예제]

1. Form을 만든다.

<h1>이벤트 연습하기</h1>
<span class="text">마우스를 올려주세요</span>
<span class="hidden"></span>

2. mouseover이벤트를 작성한다

• 마우스가 텍스트에 올라가면 바로 옆에 올라왔다는 텍스트알림이 뜨고 텍스트에서 벗어나면 알림도 사라진다.

let span = document.querySelector(".text");
let hiddenText = document.querySelector(".hidden");

function Show() {
  hiddenText.innerHTML = "마우스가 올라왔습니다.";
}

function hide() {
  hiddenText.innerHTML = "";
}

span.addEventListener("mouseover", Show);
span.addEventListener("mouseout", hide);

css

.text {
  background-color: seagreen;
}

.text:hover {
  cursor: pointer;
}