html - ＃thing1:hover＃thing2 {}无法正常工作？

我需要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;
}

最佳答案

为了使选择器正常工作，#konnichiwab应该位于#konnichiwa内部。目前他们是兄弟姐妹。

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

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

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

关于html - ＃thing1:hover＃thing2 {}无法正常工作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23101901/