使用CSS grid-area制作响应式菜单 如何实现hover时其余所有div变透明

问题原因 #

你当前使用的~是CSS后续兄弟选择器，仅能匹配到当前元素之后的同级节点，所以排在hover子项前面的元素不会被选中，自然不会触发透明度变化。

修复方案 #

调整hover的触发逻辑，从「当前子项hover时控制其他兄弟」改为「父容器hover时默认所有子项半透，单独给当前hover的子项设置完全不透明」，修改对应CSS规则即可。

把你现有代码里的这两段规则：

.grid-container > div:hover {
    opacity: 1;
    padding: 50px;
}
.grid-container > div:hover ~ [class^="item"] {
    opacity: 0.3;
}

替换为：

/* 父容器被hover时，所有子项默认透明度0.3 */
.grid-container:hover > div {
    opacity: 0.3;
}
/* 当前被hover的子项单独保持完全不透明，保留放大效果 */
.grid-container > div:hover {
    opacity: 1;
    padding: 50px;
}

修改后无需调整HTML结构，所有非hover的grid子项都会自动变为0.3透明度，和元素在HTML中的排列顺序无关。

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