CSS hover时文本仍隐藏？hover父容器指定文本不显示问题求助

问题原因 #

• 父元素的opacity属性会作用于所有后代元素，后代元素的最终透明度为 父元素opacity * 自身opacity。你给.project设置hover时opacity:0.5，就算.view-project设了opacity:1，最终显示透明度也只有0.5，如果你要文本完全不透明，这个写法本身不满足需求。
• 你给.view-project设置了绝对定位，但没有声明top/left等偏移属性，元素可能偏移出可视区域导致看不到。

解决方案 #

如果你能接受hover时目标文本也为半透明，只需要补全绝对定位的偏移值即可，修改后的CSS如下：

.project{
    position: relative;
    transition: all 0.2s ease-in-out;
}
.project:hover{
    opacity: 0.5;
}
.view-project{
    position: absolute;
    /* 示例为父容器内居中，可根据需求调整位置 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
}
.project:hover .view-project{
    visibility: visible;
    opacity: 1;
}

如果你需要父容器其他内容半透、目标文本完全不透明，就不能给父元素直接设置opacity，改为控制非目标元素的透明度即可，修改后的CSS如下：

.project{
    position: relative;
    transition: all 0.2s ease-in-out;
}
/* 仅给非目标元素设置半透效果 */
.project:hover .project-text > :not(.view-project){
    opacity: 0.5;
}
.view-project{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
}
.project:hover .view-project{
    visibility: visible;
    opacity: 1;
}

如果需要父容器背景半透，直接将背景色改为rgba格式设置透明度即可，不会影响子元素显示效果。

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