悬停在图像上的重叠文本时如何防止状态更改

Question

所以，我有一个图像，当你将鼠标悬停在它上面时会改变它的亮度，并在你将它悬停时恢复到它的原始亮度。它的中间还有一个标题。问题是当我将鼠标悬停在标题上时，它被识别为悬停在图像之外。

CSS：

.collection-img {
    background-image: url("sample.png");
    filter: brightness(70%);
}

.collection-img:hover {
    filter: brightness(100%);
}

.caption {
    position: absolute;
    top: 50%;
    left: 50%;
}

这就是我如何使用Pug风格的元素：

div
    span.bg-img.collection-img
    span.caption {{ collection.caption }}

Answer 1

  

问题是当我将鼠标悬停在标题上时，它会被识别为悬停在图像之外。

然后将:hover样式添加到整个父元素（div），而不只是图像（.collection-img）：

div:hover .collection-img { 
    filter: brightness(100%);
}