css - 设置DIV显示:block on A:hover Trigger (using only CSS)

Question

我试图在悬停链接时触发从 display:none; 到 display:block; 的 div。我试图通过相邻的兄弟选择器实现 react ，但目标 div 不会从 none 更改为 block。我认为这是因为我没有定义正确的层次结构，但我不知道还能尝试什么。

<div id="home_bar">
    <div id="welcome_left">
        I’m <a href="#" id="name">Anthony</a>.
    </div>

    <div id="welcome_right">
        <div id="name_desc">I love lamp.</div>
    </div>
</div>

以上 HTML 由以下 CSS 提供支持:

#home_bar {
display: table-row;
width: 888px;
border: 1px solid red;
margin-top: 80px;
}

#welcome_left {
letter-spacing: -1px;
font-size: 36pt;
line-height: 36pt;
width: 666px;
color: #606060;
cursor: default;
display: table-cell;
float: left;
}

#welcome_right {
float: right;
width: 200px;
display: table-cell;
position: relative;
}

#name:hover { color: #00A68D; cursor: default; }

#name_desc {
top: 50px;
position: absolute;
display: none;
}

#name:hover + #name_desc { display: block; }

我之前尝试将以下内容作为最后一行:

#home_bar > #name:hover + #name_desc { display: block; }

因为这似乎是基于 this question 的正确做法, 但我仍然无法达到预期的效果(明确地说，预期的效果是:将链接悬停在左侧，触发右侧内容的出现)。

关于我在这里可以做些什么有什么想法吗？我希望尽可能避免使用 jQuery，因为我通常更习惯使用 CSS，但我完全被困住了。

Answer 1

相邻兄弟组合器必须与兄弟元素一起使用。在这个例子中，#welcome_left 和 #welcome_right 是 sibling 。因此，当鼠标悬停在 #welcome_left 上时，您将选择兄弟 #welcome_right 的子元素 #name_desc。

EXAMPLE HERE

#welcome_left:hover + #welcome_right #name_desc {
    display: block;
}

不幸的是，您不能使用以下元素，因为 #name 和 #welcome_right 不是兄弟元素。在 CSS 中，您目前无法横向移动 DOM，因此没有任何父选择器。

#name:hover + #welcome_right #name_desc {
    display: block; /* doesn't work because they aren't siblings .. */
}