当文本悬停在图像前面时，保持图像悬停效果

Question

当鼠标悬停在文本(图像内部)上时，scale属性不应用(它会缩小到原始值)，但是当我将鼠标悬停在图像上时，它会起作用。

.gallery {
width:500px;
}
.gallery-item {
overflow: hidden;
position: relative;
}
.gallery-img {
display: block;
width: 100%;
transition: transform 0.3s;
}
.gallery-img:hover {
transform: scale(1.2);
filter: brightness(0.4);
}
.gallery-img-text {
font-size: 2.4rem;
position: absolute;
width: 100%;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
visibility: none;
opacity: 0;
transition: opacity 0.3s;
}
.gallery-item:hover .gallery-img-text {
visibility: visible;
opacity: 1;
}

<div class="gallery">
<figure class="gallery-item">
<img
class="gallery-img"
src="https://live.staticflickr.com/2462/3934247179_f29557d66a_z.jpg"
alt="photo of beautifully arranged food"
/>
<div class="gallery-img-text">
<p>Omelette</p>
</div>
</figure>
</div>

我想保持效果，即使我悬停的文本。我该怎么做?

Answer 1

将pointer-events: none设置为gallery-img-text类:

.gallery-item:hover .gallery-img-text {
visibility: visible;
opacity: 1;
pointer-events: none;
}

Answer 2

这是因为您悬停在文本而不是图像上，您需要选择容器并在图像上应用您的样式。用.gallery-item:hover .gallery-img{}代替.gallery-img:hover{}

.gallery {
width:500px;
}
.gallery-item {
overflow: hidden;
position: relative;
}
.gallery-img {
display: block;
width: 100%;
transition: transform 0.3s;
}
.gallery-item:hover .gallery-img{
transform: scale(1.2);
filter: brightness(0.4);
}
.gallery-img-text {
font-size: 2.4rem;
position: absolute;
width: 100%;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
visibility: none;
opacity: 0;
transition: opacity 0.3s;
}
.gallery-item:hover .gallery-img-text {
visibility: visible;
opacity: 1;
}

<div class="gallery">
<figure class="gallery-item">
<img class="gallery-img"
src="https://live.staticflickr.com/2462/3934247179_f29557d66a_z.jpg"
alt="photo of beautifully arranged food" />
<div class="gallery-img-text">
<p>Omelette</p>
</div>
</figure>
</div>