CSS鼠标指针显示隐藏覆盖-悬停在文本覆盖上时问题消失 我已经写了一些CSS，它在我的图像上显示一个覆盖，当它被悬停时，图像也有一个中间的标题。标题具有z-index:999确保其位于覆盖层前面

我遇到的问题是，当我将鼠标悬停在图像上时，覆盖显示出来，然后当我的鼠标移动到覆盖前面的文本上时，覆盖消失

这是我指的那一页-

这是我的html代码

<div class="module" style="background-image: url({{ url('') }}/storage/{{ $lesson_plan->thumbnail }})">
  <h2 class="lesson-thumbnail-number">LESSON {{ $lesson_plan->lesson_number }}</h2>
  <div class="thumbnail-overlay"></div>
</div>

注意-如果你访问该网站，你会注意到当你将鼠标悬停在图像上方时，图像上方也会出现一个描述，这是为了使我的问题更加简单。这与标题有相同的问题，因此我认为修复程序将对这两个问题进行排序。

更改

.thumbnail-overlay:hover{ 
  background-color: rgba(0, 150, 107, 0.7);
}

致：

---

您想第一次悬停，然后显示覆盖，而不是下次隐藏？

.thumbnail-overlay:hover{ 
  background-color: rgba(0, 150, 107, 0.7);
}

.module:hover .thumbnail-overlay { 
   background-color: rgba(0, 150, 107, 0.7);
}