如何通过悬停嵌套div来触发显示指定div？

核心问题分析 #

你的代码存在两个关键错误导致目标div无法显示：

1. 类名不匹配：CSS中使用的类名是.display-this，但HTML里目标div的class是display-me，两者不一致
2. 选择器逻辑错误：+是相邻兄弟选择器，要求两个元素必须是同级且紧挨着的节点。但你的.nested-div在.main-div内部，而目标div在.main-div外部，属于.main-div的兄弟节点，无法通过.nested-div:hover + .display-me选中

修复方案 #

方案1：基于父容器hover触发（适合.nested-div占满.main-div的场景）

无需修改HTML结构，调整CSS选择器即可：

/* 保留原有的嵌套div悬停边框样式 */
.main-div > .nested-div:hover {
    border: 1px rgb(0, 0, 0) solid;
}

/* 选择.main-div的相邻兄弟.display-me，当.main-div被hover时显示 */
.main-div:hover + .display-me {
    display: block;
}

/* 修正类名，匹配HTML中的目标div */
.display-me {
    display: none;
}

方案2：调整HTML结构，让目标div成为.nested-div的同级兄弟

将目标div移入.main-div内部，成为.nested-div的相邻节点，这样+选择器就能生效：

<div class='main-div'>
    <div class='nested-div'>
        Hover Me
    </div>
    <!-- 目标div移到main-div内部，与nested-div同级 -->
    <div class='display-me'>
        Display Me
    </div>
</div>

对应的CSS：

.main-div > .nested-div:hover {
    border: 1px rgb(0, 0, 0) solid;
}

/* 现在nested-div和display-me是同级相邻，+选择器生效 */
.main-div > .nested-div:hover + .display-me {
    display: block;
}

.display-me {
    display: none;
}

方案3：用JavaScript精准控制（适合HTML结构无法修改的场景）

通过监听鼠标事件直接控制目标div的显示状态：

const nestedDiv = document.querySelector('.main-div > .nested-div');
const displayDiv = document.querySelector('.display-me');

nestedDiv.addEventListener('mouseover', () => {
    displayDiv.style.display = 'block';
});

nestedDiv.addEventListener('mouseout', () => {
    displayDiv.style.display = 'none';
});

CSS保留基础样式：

.main-div > .nested-div:hover {
    border: 1px rgb(0, 0, 0) solid;
}

.display-me {
    display: none;
}

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