为什么悬停方块时opacity不生效，Google、Youtube文本无法显示？

问题根因 #

你将opacity: 0属性显式设置在了.div2::after、.div3::after两个伪元素上，但悬停时你只修改了它们的父元素.div2、.div3的opacity值。父元素的opacity不会覆盖子元素（含伪元素）自己单独设置的opacity属性，因此两个伪元素始终保持透明状态，无法显示。
而MENU文本可以正常消失，是因为.div1::after没有单独设置opacity，会继承父元素.div1的opacity值，所以父元素设为0时，伪元素也同步透明。

修复方案 #

任选一种修改方式即可：

方案1：把opacity配置移到父div层 #

删除.div2::after、.div3::after中的opacity: 0规则，新增以下规则：

.div2, .div3 {
  opacity: 0;
  transition: .3s opacity; /* 可选，增加显隐过渡效果 */
}

你原有悬停控制div opacity的规则无需修改。

方案2：直接修改伪元素的opacity #

把原有悬停控制规则的选择器改为指向伪元素即可：

.square:hover .div2::after,
.square:hover .div3::after {
  opacity: 1;
}

内容的提问来源于stack exchange，提问作者Champion