hover()::두가지 마우스 이벤트(mouseenter, mouseleave)를 이미 가지고 있는 기능
1. 기본
2. image
3. table_1
1. 기본
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hover()::두가지 마우스 이벤트(mouseenter, mouseleave)를 이미 가지고 있는 기능</title>
<style type="text/css">
.reverse{background:blue; color:white;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('h2').hover(function(){
$(this).addClass('reverse');
}, function() {
$(this).removeClass('reverse');
});//hover
});
</script>
</head>
<body>
<h2>오늘은 화요일 입니다. </h2>
<h2>오후 늦게 비가 온다는 예보가 있습니다.</h2>
<h2>퇴근할 때 비가 올 수 있습니다. 우산들 가지고 오셨나요?</h2>
</body>
</html>
2. image
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hover_image</title>
<style type="text/css">
.Larger{border: 2px solid red; width: 200px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//각각의 이미지에 마우스를 갖다 대면 현재 크기보다 두배로 커지고
//이미지에서 마우스가 벗어나면 원래의 크기를 되찾도록 Hover()를 이용해 구현합니다.
$('img').hover(
function(){
$(this).addClass('Larger')},
function(){
$(this).removeClass('Larger')}
)
});
</script>
</head>
<body>
<h2>Bigger Image</h2>
<img alt="" src="../image/1.JPG" width =100px>
<img alt="" src="../image/2.JPG" width =100px>
<img alt="" src="../image/3.JPG" width =100px>
</body>
</html>3. table
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
border: 3px solid magenta; width:550px;
}
tr, td, th{
text-align: center;
border: 1px dotted blue;
font-size: 1.2em;
}
.hover{
background: #00f;
color: #fff;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('tbody tr').hover(
// 1. 그냥 this에 add하기
/* function(){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
}); */
//2.현재 이벤트가 적용된 tr 태그중에서 find()를 이용해서 td라는 태그를 발견하면 addClass()를 적용합니다.
function(){
$(this).find('td').addClass('hover')
},
function(){
$(this).find('td').removeClass('hover');
});
});
</script>
</head>
<body>
<Table>
<thead>
<tr>
<th>이 름</th><th>직 업</th><th>주 소</th>
</tr>
</thead>
<tbody>
<tr>
<td>아이유</td><td>가수</td><td>여의도</td>
</tr>
<tr>
<td>손석희</td><td>사회자</td><td>신림동</td>
</tr>
<tr>
<td>조정석</td><td>배우</td><td>혜화동</td>
</tr>
<tr>
<td>장민호</td><td>가수</td><td>서초동</td>
</tr>
</tbody>
</Table>
</body>
</html>
'컴퓨터 프로그래밍 > JQuery' 카테고리의 다른 글
| hide(), show()-hover(), mouseenter(), mouseleave() (0) | 2020.05.30 |
|---|---|
| click()- 간단한calulator 구현, unbinding (0) | 2020.05.29 |
| bind()-removeClass(), addClass(), mouseenter(), mouseleave() (0) | 2020.05.29 |
| append()-img, setTimeOut(), setInterval() (0) | 2020.05.29 |
| append(), after(), prepend(), before() (0) | 2020.05.29 |