图像块内的文本块是否可以具有会影响图像块的悬停设置？答案

【问题标题】：Can a text block inside an image block have a hover setting than can affect the image block?图像块内的文本块是否可以具有会影响图像块的悬停设置？
【发布时间】：2023-03-24 06:09:02
【问题描述】：

我正在处理 WordPress 中的一个对象，一个带有图片背景和白色边框的块，以及其中一个没有填充整个图片空间的文本块，就像它有填充一样，但没有填充正在使用。对象的背景有一个覆盖透明度设置，我设置为 50%。客户要求我悬停将不透明度更改为 20% 并失去白色边框。我可以使用“uagfb-section__overlay”类来做到这一点。

该 div 中心的文本块较小，在下一个 div“uagfb-section__inner-wrap”中，当您将鼠标悬停在其上时，照片的不透明度会恢复到 50%。如果光标在该文本 div 之外，但在覆盖 div 之内，则不透明度为 20%。有没有办法让覆盖类保持不透明度变化，而不管将鼠标悬停在中心的文本块上吗？

我查看了其他 CSS 选择器，例如 >、+ 和 ~，但它们与我的需要无关。如果有一个像< 这样基于孩子的行为影响父母的选择器似乎会很好，但这并不存在。

HTML...

 <div class="wp-block-column">
    <section class="wp-block-uagb-section uagb-section__wrap uagb-section__background-image uagb-block-1695edec-a8de-49d4-8758-1ac29736dab0 cause-section-block">
<div class="uagb-section__overlay"></div>
<div class="uagb-section__inner-wrap">
    <p style="color:#ffffff" class="has-text-color has-text-align-center has-regular-font-size">Promoting Wellness</p>
    </div>
    </section>
</div>

我的 CSS 来触发不透明度变化...

.cause-section-block .uagb-section__overlay:hover {
    opacity: 0.2;
}

【问题讨论】：

标签： css

【解决方案1】：

也许是css属性：

pointer-events: none;

在 uagb-section__inner-wrap css 类中可以完成这项工作。

【讨论】：

就是这样！有用。感谢您抽出宝贵时间与我分享。非常宝贵的帮助，Heya。