html - #thing1 :hover #thing2 {} not working?

Question

我需要一些 CSS 方面的帮助，我正在努力做到这一点，当鼠标悬停在#konnichiwa 上时，它会显示#konnichiwab。使用#konnichiwa:hover 和#konnichiwab:hover 更改内容时，它有效，只是选择其他 id 有问题。编辑:抱歉，我忘了说，我也试过“+”选择器。仍然没有运气。

第二次编辑:据我了解，兄弟选择器是在代码中选择所选元素旁边的元素吗？我已经在这个问题中删除了几行，我很抱歉。 Konnichiwa 和​​ konnichiwab 并不相邻。这是因为我已经将konnichiwa 放在一个div 中进行样式设置，而我不想将此样式应用到konnichiwab 中。我可能可以通过删除 div 并向 konnichiwa 添加一个类来解决这个问题，但我首先想看看是否有另一种不需要它们彼此相邻的解决方案。

<span id="konnichiwa">こんにちは</span>

<div class="tbubs" id="konnichiwab">Hello</div>

#konnichiwa:hover + #konnichiwab {
    color: blue;
    display:block;
}

.tbubs 
{
    position: absolute;
    margin-top: 115px;
    margin-left: 35px;
    background-color:#ea3030;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 30px;
}

.tbubs:after 
{
    content: "";
    position: absolute;
    bottom: -15px;
    border-style: solid;
    border-width: 15px 10px 0;
    border-color: #ea3030 transparent;
    display: block;
    width: 0;
    z-index: 1;
}

.tbubs:after 
{
    content: "";
    position: absolute;
    bottom: -15px;
    border-style: solid;
    border-width: 15px 10px 0;
    border-color: #ea3030 transparent;
    display: block;
    width: 0;
    z-index: 1;
}

Answer 1

要使该选择器按预期工作，#konnichiwab 应该在内部 #konnichiwa。目前他们是兄妹。

您可以使用 adjacent sibling selector 来解决这个问题。

#konnichiwa:hover + #konnichiwab {
    color: blue;
    display:block;
}

演示:http://jsfiddle.net/X98tE/