-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
img 에 hover 효과를 왜 줄 수 없나요??
21.05.02 15:34 작성 조회수 633
1
.item 이 아니라 그 안에 있는 img 에 직접 hover 효과를 주면 작동을 안하던데 왜 안하는지 알고싶어요~
'이미지에 마우스 올리면' 인데 실제로는 이미지에 호버효과를 주면 작동하질 않는게 의아합니다.
혹시 원래는 작동되는데 제가 코딩 틀리게해서 안되는건가하는 생각도 들구요.
.item img:hover .detail {
bottom: -50%; }
답변을 작성해보세요.
2
1
코딩웍스(Coding Works)
지식공유자2021.05.02
부모요소:hover 자식요소 {....}
위에처럼 :hover와 같이 있는 선택자는 부모요소이고 :hover 다음에 있는 선택자는 반드시 자손요소만 가능합니다.
지금 주신 CSS 코드를 보면...
.item img:hover 가 부모요소여야 하고 .detail이 img의 자식요소여야 하는데 그렇지 않습니다.
그래서 .item:hover .detail {....} 이렇게 하셔야 합니다.
아래 html을 보시면 부모자식 계층이 보이실거에요.
<div class="item">
<img src="" alt="">
<div class="detail">...</div>
</div>
답변 2