<body>
<ul class="category">
<li>
<a href="#"><img src="./common/image/about.svg" alt="about" /></a>
</li>
<li>
<a href="#"><img src="./common/image/project.svg" alt="about" /></a>
</li>
<li>
<a href="#"><img src="./common/image/contact.svg" alt="about" /></a>
</li>
</body>
<style>
.section1 .category li::after {
opacity: 0;
content: "";
position: absolute;
display: block;
width: 1.5rem;
height: 1.5rem;
left: 10%;
top: 50%;
transform: translateY(-50%);
background: url(../common/image/redBall.svg) no-repeat;
}
.section1 .category li:hover .section1 .category li::after {
opacity: 100%; /* 이 부분이 틀려도 단단히 틀렸다 */
}
</style>버튼에 호버하면 뾰롱~ 하고 구슬 이미지가 보였으면 했다.
css를 작성했는데 안된다.
나는 왜 지금까지 이렇게 알고있었을까?
.section1 .category li:hover
.section1 .category li::after {
opacity: 100%;
}
리스트에 호버하면. 리스트의 애프터가 투명도 100%
라고 굳게 믿고있었다.
그래서 이전에도 호버이벤트를 구현하지 못한적이 많다;
답은 간단했다 ⬇️
<style>
.section1 .category li:hover::after {
opacity: 100%;
}
</style>:hover 뒤에 바로 ::after를 붙이면 된다는 것.
기초적인 문제를 가지고 30분은 고민한 것 같다.
근데 구현하고 보니 안예쁘다. 허접하다..
백그라운드 컬러를 채우거나 하려고 했는데..
픽셀 테두리의 배경을 border-radius로 제어가 불가능하다. (픽셀 그림 자체의 비율이 이상해서 안됨)
그림을 다시 그리거나 해서 다른 호버이벤트로 바꿔줘야겠다.
저녁놀 마을 사람