고정 헤더 영역
상세 컨텐츠
본문
마우스 포인터를 따라다니는 말풍선 javascript + css 조합
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>마우스 따라다니는 말풍선</title>
<style>
body {
height: 100vh;
margin: 0;
overflow: hidden;
font-family: sans-serif;
}
.tooltip {
position: absolute;
background: #333;
color: #fff;
padding: 6px 10px;
border-radius: 8px;
font-size: 14px;
pointer-events: none;
white-space: nowrap;
transform: translate(15px, 15px); /* 포인터에서 약간 떨어지도록 */
transition: transform 0.1s ease;
z-index: 9999;
}
</style>
</head>
<body>
<div class="tooltip">이곳이 말풍선!</div>
<script>
const tooltip = document.querySelector('.tooltip');
document.addEventListener('mousemove', (e) => {
tooltip.style.left = `${e.pageX}px`;
tooltip.style.top = `${e.pageY}px`;
});
</script>
</body>
</html>'홈페이지 제작 > Javascript' 카테고리의 다른 글
| JavaScript란 무엇인가요? 웹 개발에 꼭 필요한 이유! (3) | 2025.06.08 |
|---|