忽略以图像为中心的文本 div

Question

我在 div.

中将文字居中放置在图像上

<div class="row">
   <div class="col-md-4"><img src="dog.jpg" class="panel"><div class="panel-text">ONE ONE ONE</div></div>
   <div class="col-md-4"><img src="dog.jpg" class="panel"><div class="panel-text">TWO TWO TWO</div></div>
   <div class="col-md-4"><img src="dog.jpg" class="panel"><div class="panel-text">THREE THREE</div></div>
</div>

当鼠标悬停在图像上时，图像会通过 CSS transform: scale(1.2)

放大

.panel:hover {
    transform: scale(1.2);
}

我的问题是，如果 div 中的文本（以图像为中心）被鼠标悬停，.panel:hover 将被忽略并返回到正常状态。如果文本被鼠标悬停并保持 transform: scale(1.2); 我怎样才能 ignore/disable 文本？活跃？

现场演示https://vendbits.com/wp_gpl/

提前致谢。

Answer 1

您可以在正文中添加pointer-events: none;

.panel-text{
   pointer-events: none;
}

忽略以图像为中心的文本 div

Ignore mouseover of text centered over image inside div

css