css - 悬停时的字幕不起作用/不显示

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