タイトルにカーソルを合わせると画像がポップアップ表示される

Question

タイトル<h1>タグにカーソルを合わせると画像が表示されます。

これは、これまでのところ、私のCSSです：

以下

.certificate h1{ 
      text-align:left; 
     } 

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

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

も

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

私のイメージはまだ現れdesnt何らかの理由で私のHTMLです。正しいタグでホバーをチェックしていますか？

Answer 1

ホバリング.certificateにはイメージがありません。両方を同じ容器に入れてください。また、画像がある.containerの唯一のものはposition: absoluteの画像であるため、:hoverのスペースを与えません。したがって、技術的には、画像の親をホバリングすることはできません。あなたは歓迎メイトですmtanti95 @

.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>