# 29.호버효과

<div class="button">
	<span class="button_circle"></span>
	<a href="#" class="button_inner">
		<span class="text"> Click</span>
	</a>
</div>

@import url(https://qwerewqwerew.github.io/source/style/reset.css);
body {
	font-family: 'Pretendard', sans-serif;
}
.button {
	overflow: hidden;
	position: relative;
	display: inline-block;
	border-radius: 3px;
	margin: 50px;
}
.button_circle {
	background-color: red;
	border-radius: 1000px;
	position: absolute;
	left: 0;
	top: 0;
	width: 0px;
	height: 0px;
	margin-left: 0px;
	margin-top: 0px;
	pointer-events: none;
	/*animation-timing-function: ease-in-out; */
}
.button_inner {
	display: inline-block;
	background: #f8b627;
	color: #f4f4f4;
	font-size: 16px;
	font-weight: normal;
	width: 132px;
	text-align: center;
	border-radius: 3px;
	transition: 400ms;
	text-decoration: none;
	padding: 22px;
	z-index: 100000;
}
.text {
	position: relative;
	z-index: 10000;
}
.explode-circle {
	animation: explode 0.5s forwards;
}
.desplode-circle {
	animation: desplode 0.5s forwards;
}
@keyframes explode {
	0% {
		width: 0px;
		height: 0px;
		margin-left: 0px;
		margin-top: 0px;
		background-color: rgba(42, 53, 80, 0.2);
	}
	100% {
		width: 600px;
		height: 600px;
		margin-left: -300px;
		margin-top: -300px;
		background-color: rgba(20, 180, 87, 0.8);
	}
}
@keyframes desplode {
	0% {
		width: 600px;
		height: 600px;
		margin-left: -300px;
		margin-top: -300px;
		background-color: rgba(20, 180, 87, 0.8);
	}
	100% {
		width: 0px;
		height: 0px;
		margin-left: 0px;
		margin-top: 0px;
		background-color: rgba(129, 80, 108, 0.6);
	}
}

<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script>

$('.button_inner').on({
	mouseenter: function (e) {
		var parentOffset = $(this).offset();
		console.log(e.pageX, parentOffset);
		var relX = e.pageX - parentOffset.left;
		console.log(relX);

		var relY = e.pageY - parentOffset.top;

		$(this).prev('.button_circle').css({ left: relX, top: relY });
		$(this).prev('.button_circle').removeClass('desplode-circle');
		$(this).prev('.button_circle').addClass('explode-circle');
	},
	mouseleave: function (e) {
		var parentOffset = $(this).offset();

		var relX = e.pageX - parentOffset.left;
		var relY = e.pageY - parentOffset.top;
		$(this).prev('.button_circle').css({ left: relX, top: relY });
		$(this).prev('.button_circle').removeClass('explode-circle');
		$(this).prev('.button_circle').addClass('desplode-circle');
	},
});

const btn = document.querySelector('.button_inner');
btn.addEventListener('mouseenter', explode);
btn.addEventListener('mouseleave', displode);

function explode(e) {
	let parentOffset = [this.offsetLeft, this.offsetTop];
	console.log(parentOffset[0], parentOffset[1]);
	let relX = e.pageX - parentOffset[0];
	let relY = e.pageY - parentOffset[1];
	const prev = this.previousElementSibling;
	prev.style.left = relX + 'px';
	prev.style.top = relY + 'px';
	prev.classList.add('explode-circle');
	prev.classList.remove('desplode-circle');
}
function displode(e) {
	let parentOffset = [this.offsetLeft, this.offsetTop];
	const prev = this.previousElementSibling;
	let relX = e.pageX - parentOffset[0];
	let relY = e.pageY - parentOffset[1];
	prev.style.left = relX + 'px';
	prev.style.top = relY + 'px';
	prev.classList.remove('explode-circle');
	prev.classList.add('desplode-circle');
}