img 에 hover 효과를 왜 줄 수 없나요??

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

[Part 01] 쇼핑몰 아이템 UI 호버 이펙트 - 와이어프레임 설계, 중요 기능 제작

작성

981

.item 이 아니라 그 안에 있는 img 에 직접 hover 효과를 주면 작동을 안하던데 왜 안하는지 알고싶어요~

'이미지에 마우스 올리면' 인데 실제로는 이미지에 호버효과를 주면 작동하질 않는게 의아합니다.

혹시 원래는 작동되는데 제가 코딩 틀리게해서 안되는건가하는 생각도 들구요.

  .item img:hover .detail {
    bottom: -50%; }

답변 2

질문자

시간내주셔서 답변해주셔서 감사합니다. 이해됐어요~ >_<

지식공유자

부모요소:hover 자식요소 {....}

위에처럼 :hover와 같이 있는 선택자는 부모요소이고 :hover 다음에 있는 선택자는 반드시 자손요소만 가능합니다.

지금 주신 CSS 코드를 보면...

.item img:hover 가 부모요소여야 하고 .detail이 img의 자식요소여야 하는데 그렇지 않습니다.

그래서 .item:hover .detail {....} 이렇게 하셔야 합니다.

아래 html을 보시면 부모자식 계층이 보이실거에요.

<div class="item">
  <img src="" alt="">
  <div class="detail">...</div>
</div>

인프런 커뮤니티 질문&답변