img 에 hover 효과를 왜 줄 수 ... - Inflearn

HTML+CSS+JS Portfolio thực tế (Mùa 1)

[Phần 01] Hiệu ứng hover UI mục sản phẩm trang mua sắm - Thiết kế wireframe, xây dựng tính năng cốt lõi

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

Viết

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

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

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

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

jqueryHTML/CSS

Câu trả lời 2

Người đặt câu hỏi

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

Người chia sẻ kiến thức

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

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

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

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

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

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

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