<style>
.shop-bg {
background-color: #eee;
padding: 20px;
}
.shop-container {
display: flex;
justify-content: space-between;
}
.item {
position: relative;
width: 33%;
padding: 20px;
}
img {
width: 100%;
vertical-align: top;
}
.animation {
position: relative;
height: 100%;
background-color: black;
overflow: hidden;
}
.p {
position: absolute;
width: 100%;
height: 50%;
top: 100%;
left: 0;
background-color: #eee;
transition: all .5s;
}
.animation:hover .p {
top: 50%;
transition: all .5s;
}
</style>
</head>
<body>
<div class="shop-bg">
<div class="shop-container">
<div class="item">
<div class="animation">
<div class="p">
4
</div>
< img src="../product1-1.jpg" alt="">
</div>
</div>
<div class="item">
<div class="animation">
<div class="p">
4
</div>
< img src="../product2.jpg" alt="">
</div>
</div>
<div class="item">
<div class="animation">
<div class="p">
4
</div>
< img src="../product3.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
<hr />
선생님이 내주신 숙제는 끝냈습니다.
그런데 궁금한 점이
.animation:hover .p {
top: 50%;
transition: all .5s;
}
이렇게 하여서 완성했는데
animation이라는 박스를 호버 했을 때 그 안에 있는 p라는 클래스의 박스의 top 50%
올려라는 뜻인데
p라는 클래스에 마우스가 위치해 있는데도 hover를 통한 애니메이션이 유지되고
있는지가 궁금합니다.
참고: 개발자 도구로 확인 해봤는데 p라는 클래스의 박스에 마우스가 위치해 있는데도
hover 애니메이션이 되니 계속 hover 애니메이션이 동작되는게 궁금합니다.
참 쓸데 없는 궁금증 일 수 도 있는데 전 이런게 궁금하네요
