제목에 마우스를 올리면 이미지 팝업이 표시됩니다.

Question

<h1> 태그 위에 마우스를 올려 놓으면 이미지가 표시됩니다.

.certificate h1{ 
      text-align:left; 
     } 

    .certificate:hover, .certificate:hover img{ 
     visibility:visible; 
     z-index:100; 
    } 

    .certificate img{ 
     visibility:hidden; 
     position:absolute; 
    } 

아래의 내 이미지가 여전히 표시 desnt 몇 가지 이유를 들어 내 HTML 너무

<div class="certificate"> 
    <h1>Title</h1> 
</div> 
<div class="certificate"> 
    <img src="./images/image.jpg"> 
</div> 

입니다 :

이 지금까지 내 CSS입니다. 내가 올바른 태그를 가리키고 있는지 확인하고 있습니까?

Answer 1

호버링 .certificate에는 이미지가 없으므로 두 용기를 같은 용기에 넣으십시오. 또한 이미지가있는 .container의 유일한 것은 position: absolute의 이미지이므로, :hover 공간을 제공하지 않습니다. 따라서 기술적으로 이미지의 부모를 가리킬 수는 없습니다.

.certificate h1 { 
 
    text-align: left; 
 
} 
 
.certificate:hover img { 
 
    visibility: visible; 
 
    z-index: 100; 
 
} 
 
.certificate img { 
 
    visibility: hidden; 
 
    position: absolute; 
 
    left: 100px; 
 
    top: 0; 
 
}

<div class="certificate"> 
 
    <h1>Title</h1> 
 
    <img src="http://placehold.it/350x150"> 
 
</div>

천만 동료 있습니다 mtanti95 @