- mouseenter(), mouseleave()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(
function() {
$(".p1").mouseenter(function() { // 마우스 올렸을 때
$(".p1").css("background-color", "yellow");
});
$(".p1").mouseleave(function() { // 마우스 치웠을 때
$(".p1").css("background-color", "white");
});
$(".p2").mousedown(function() { // 마우스 눌렀을 떄
alert("mouse down!");
})
$(".p2").mouseup(function() { // 마우스 뗐을 때
alert("mouse up!");
})
$(window).mousemove(function(e) {
$(".p3").text("x좌표, y좌표 : " + e.pageX + ", " + e.pageY);
});
}
);
</script>
<style>
</style>
</head>
<body>
<p class="p1">mouseenter, mouseleave</p>
<p class="p2">mousedown, mouseup</p>
<p class="p3">x좌표, y좌표 : </p>
</body>
</html>
- hover()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(
function() {
$("p").hover(
function() {
alert("mouse over!");
},
function() {
alert("mouse out!");
}
)
}
);
</script>
<style>
</style>
</head>
<body>
<p>this is paragrapgh</p>
</body>
</html>
'제이쿼리' 카테고리의 다른 글
| [제이쿼리] one(), select(), after(), triggerHandler() (0) | 2020.08.12 |
|---|---|
| [제이쿼리] select(), change(), keydown(), keyup(), keypress(), scroll() (0) | 2020.08.12 |
| [제이쿼리] filter(), find(), width(), replace(), toggle() (0) | 2020.08.12 |
| [제이쿼리] navigator() (0) | 2020.08.12 |
| [제이쿼리] next(), first(), last(), eq() (0) | 2020.08.12 |
