キャプションは、私は、画像をホバーするたびに、キャプションは表示されません

Question

を表示/動作しません。..

以下の私のCSSを修正してください。

変更する必要はありますか？

ありがとう、応援！

.gallery-item { 
 
    float: left; 
 
    width: 14.25%; 
 
    cursor: pointer; 
 
} 
 

 
.caption{ 
 
    display: none; 
 
} 
 

 
.gallery-item .caption:hover{ 
 
    display: block; 
 
} 
 
    
 
.gallery-item img { 
 
    padding-left: 5px; 
 
    height:200px; 
 
    width:100%; 
 
}

<div class="gallery-item"> 
 
    <img src="images/event-1.jpg" alt="Sunday"> 
 
    <div class="caption">Lorem Ipsum</div> 
 
</div>

Answer 1

入れ:hover.gallery-itemで代わりにあなたのコードの中で何が起こる

.gallery-item { 
 
    float: left; 
 
    width: 14.25%; 
 
    cursor: pointer; 
 
} 
 

 
.caption{ 
 
    display: none; 
 
} 
 

 
.gallery-item:hover .caption{ 
 
    display: block; 
 
} 
 
    
 
.gallery-item img { 
 
    padding-left: 5px; 
 
    height:200px; 
 
    width:100%; 
 
}

<div class="gallery-item"> 
 
    <img src="images/event-1.jpg" alt="Sunday"> 
 
    <div class="caption">Lorem Ipsum</div> 
 
</div>

あなたがdisplay:noneを持つ要素にホバーセレクターを入れていることです、あなたは全くそれを選択できないことを意味します