css - 将鼠标悬停在图像上的叠加文本上时如何防止状态更改

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

The problem is when I hover on the caption, it's recognized as hovering out of the image.

然后将 :hover 样式添加到整个父元素 (div)，而不仅仅是图像 (.collection-img):

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