Question

当链接悬停时，我正试图从div触发display:none;到display:block;。我试图通过相邻的兄弟选择器实现反应，但目标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是兄弟姐妹。因此，当#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 .. */
}

设置DIV显示：阻止A：悬停触发（仅使用CSS）

1 个答案: