이벤트 : 웹에서 검색 혹은 마우스를 올렸을떄, 카를 입려마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것
마우스 오버 시 숨겨진 요소를 표시하는 방법
- mouseover요소에
EventListener를 추가한다 . - 요소를 가리킬 때마다 의 display속성을
divplay:block로 설정
예제 활용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
.d-flex{
flex-direction: column;
margin-left: 90px;
width: 286px;
position: relative;
padding: 0;
}
.dflex .hidden-div{
display:block;
width: 100%;
height:auto;
}
.hidden-div{
background-color: gray;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
position: absolute;
width: 100%;
height: 100%;
text-align:start;
padding: 40px;}
</style>
</head>
<body>
<!-- card start -->
<div id="container"class="d-flex flex-column " >
<div class="card" style="width: 18rem" >
<svg
class="bd-placeholder-img card-img-top"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>0
</svg>
</div>
<div class="hidden-div opacity-75" id="hidden-div">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
</body>
</html>const el = document.getElementById('container');
const hiddenDiv = document.getElementById('hidden-div');
document.getElementById('container').addEventListener('load', function(str){ hiddenDiv.style.display = 'none';
}());
// Show hidden DIV on hover
el.addEventListener('mouseover', function handleMouseOver() {
hiddenDiv.style.display = 'block';
// if you used visibility property to hide div
// hiddenDiv.style.visibility = 'visible';
});
// (optionally) Hide DIV on mouse out
el.addEventListener('mouseout', function handleMouseOut() {
hiddenDiv.style.display = 'none';
// 👇️ if you used visibility property to hide div
// hiddenDiv.style.visibility = 'hidden';
});