为什么CSS设置div聚焦时显示另一个div的规则未生效？

问题根因 #

• 选择器匹配逻辑错误：你当前使用的.explore-card-light:focus .explore-card-hidden-info是后代选择器，仅能匹配到.explore-card-light内部的.explore-card-hidden-info元素，但从你的DOM结构可以看到，隐藏信息div和.explore-card-light是同级兄弟元素，后代选择器无法命中。
• 普通div默认无焦点特性：div属于默认不可聚焦元素，没有添加tabindex属性的情况下，无法触发focus事件。

修复方案 #

1. 修改CSS选择器，将后代选择器替换为相邻兄弟选择器+：

.explore-card-light:focus + .explore-card-hidden-info, 
.explore-card-hidden-info:hover {
    display: block;
}
/* 如果需要 hover 卡片时也展示隐藏内容，可额外添加以下规则 */
.explore-card-light:hover + .explore-card-hidden-info {
    display: block;
}

2. 给.explore-card-light元素添加tabindex属性，使其支持聚焦：

<div className="explore-card-light web-box-hor" style={props.style} tabIndex="0">

补充说明 #

你其他模块的相同逻辑能生效，大概率是因为其他模块里需要显示的元素是聚焦元素的子元素，符合后代选择器的匹配规则，所以不会出现该问题。

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