悬停上的标题不起作用/显示

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的元素，这意味着您无法选择它