javascript _Event-mouseover

denmark-choco·2020년 5월 23일
0

code-states_3주차

목록 보기
6/9

[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;
}
profile
codestates_2020.05.04~ing // 이제 걸음마를 시작한 초보 개발자입니다. 혹 잘못된 부분을 발견하신다면 언제든지 말씀부탁드립니다^^!!

0개의 댓글