2022. 6. 2. 08:44ㆍProgramming의 세계/JavaScript
onmouseover: 마우스를 올렸을 경우, onomouseover 이벤트를 발생시킨다.
onmouseleave: 올렸던 마우스가 나갔을 경우, onomouseleave 이벤트를 발생시킨다.
(onmouseleave의 경우 onomouseover과 매우 비슷한데자식요소들까지 영향을 주느냐 안주느냐의 차이점이라고 한다.)
onmouseover, onmouseleave 을 확인해보면
각각 이벤트를 'onmouseover!', 'onmouseleave!' 로 작성하여 콘솔창에 띄우게 해보았다.
<body>
<style>
#box {
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
<div id="box" onmouseover="onMouseOver()" onmouseleave="onMouseLeave()"></div>
<script>
function onMouseOver() {
console.log('onMouseOver!');
}
function onMouseLeave() {
console.log('onMouseLeave!');
}
</script>
</body>
마우스를 갖다대고 땔때마다 콘솔창에 텍스트가 뜨는 것을 확인할 수 있다.
이를 활용하여 색상이 변경되는 메뉴를 만들어보겠다.
미션: 마우스를 갖다대면 흰색으로 바뀌는 메뉴 상자를 만들어보자!!
1. html 구성: 상자의 모양은 가로로 연이어 3개를 만들것이다. 다음과 같이 구성해본다.
<div class="div1" onmouseover="changecolor1()" onmouseleave="backcolor1()">
<div id="target1">html</div>
</div>
<div class="div1" onmouseover="changecolor2()" onmouseleave="backcolor2()">
<div id="target2">css</div>
</div>
<div class="div1" onmouseover="changecolor3()" onmouseleave="backcolor3()">
<div id="target3">java</div>
</div>2. style 구성: onmouseover 상태에는 흰색(changecolor class로 스타일 지정), onmouseleave상태에는 그레이 색 (div1 class에 스타일 지정) 을 띄게 하게 할 예정이다. <style>을 열어 스타일은 다음과 같이 구성한다.
<style>
.changecolor {
background-color: white;
color: black;
border-color: black;
}
.div1 {
display: inline-block;
width: 100px;
height: 50px;
color: white;
border-color: black;
border-style: solid;
background-color: gray;
text-align: center;
line-height: 50px;
}
.backcolor {
background-color: gray;
color: black;
border-color: black;
}
</style>3. function 구성: <script>로 자바스크립트를 열어 id를 받아 이를 변수화시켜주고 해당 변수의 클래스이름을 변환시켜주는 function을 만든다.
function changecolor1() {
let $target = document.getElementById('target1');
$target.className = 'changecolor'
}
function backcolor1() {
let $target = document.getElementById('target1');
$target.className = 'backcolor'
}나머지 2가지 상자도 다음과같은 function을 만들어준다.
<결과창>
D.O.N.E!!
'Programming의 세계 > JavaScript' 카테고리의 다른 글
| [JQuery] 체크박스 전체 선택, 해제, 값 얻기 (0) | 2022.06.02 |
|---|---|
| [JQuery] JQuery/ CDN 시작하기 (0) | 2022.06.02 |
| [JS] onclick 활용, button눌러 div class 변경하기 (0) | 2022.05.31 |
| [JS] prompt /alert 문자열 받아 출력하기 (0) | 2022.05.31 |
| [JS] DOM, 자바스크립트, JSON 개념 (0) | 2022.05.31 |