반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.circle{
position : absolute;
left : 100px; top :100px;
width : 100px ; height :100px;
background : #99c; color: white;
border-radius :50%;
text-align : center;
line-height: 100px;
}
</style>
</head>
<body>
<button id ="btn1">click</button>
<button id ="btn2">hover</button>
<script>
$('#btn1').click(function(){
$(this).css('border-radius', '10px');
});
$('#btn2').hover(function(){
$(this).css('box-shadow','3px 3px 3px #666');
},
function(){
$(this).css('box-shadow','0px 0px 0px #666');
});
</script>
</body>
</html>$('#btn1').click(function(){
$(this).css('border-radius', '10px');
});이거는 클릭했을 때 둥글게 바뀌는 것이고
$('#btn2').hover(function(){
$(this).css('box-shadow','3px 3px 3px #666');
},
function(){
$(this).css('box-shadow','0px 0px 0px #666');
});
이거는 호버했을 때 box-shadow가 3px씩 주게 되고 땠을 땐 밑에 함수가 실행됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<h3> 그래프를 클릭 </h3>
<progress min = 0 max = 100 value = 0></progress>
<span id = "info"></span>
<script>
var val = 0;
$('progress').on('click',function(){
$(this).val(val);
$('#info').html(val);
if (val <100) { val += 10; }
})
</script>
</body>
</html>클릭하면 10씩 올라갑니다.
그냥 click으로 만들어도 되는 거 아닌가요? 라고 할 수 있는데요
on 메소드는 여러 복수 이벤트를 동시에 연결 할 수 있는 장점이있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<button id ="btn" style="padding: 10px">click</button>
<script>
$(function(){
$('#btn').on('mouseenter mouseleave',function(e){
if(e.type == 'mouseenter'){
$(this).css('border-radius','10px');
}
if(e.type == 'mouseleave'){
$(this).css('border-radius','0px');
}
});
});
</script>
</body>
</html>hover로 구현할 경우 때면 밑에 함수가 계속 적용 됩니다. 위에 hover로 구현하신 0px을 15px로 줘보세요
처음 상태랑 버튼에서 벗어났을 때랑 다르게 보입니다.
mouseenter와 mouseleave를 통해서 완벽한 hover가 구현이 가능합니다.
e.type이라는 건 function 안에 매개변수를 e라고 했을 때
그 값이 mouseenter일 경우 mouseleave일 경우를 구분하기 위해 사용했습니다.
반응형