#thing1:hover #thing2 {} 不工作？答案

【问题标题】：#thing1:hover #thing2 {} not working?#thing1:hover #thing2 {} 不工作？
【发布时间】：2014-04-16 06:41:51
【问题描述】：

我需要一些有关 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 应该是 inside #konnichiwa。目前他们是兄弟姐妹。
空格是后代组合符，也许你想使用相邻的兄弟组合符：+ 而不是空格。 reference.sitepoint.com/css/combinators
关于您的第二次编辑，不，您绝对没有办法让悬停事件从父元素中冒出来并单独使用 CSS 影响页面上的其他一些随机元素。你能做的最接近的是兄弟姐妹。

标签： html css hover

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

使用可以使用相邻的兄弟组合符 (+) 。因此，当您将鼠标悬停在第一个选择器上时，属性将应用于第二个选择器，即其相邻的 .

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

请阅读此adjacent sibling combinator

【讨论】：

【解决方案3】：

其他人建议使用 adjacent sibling selector（有充分的理由 - 它可以根据您的标记工作......）

类似http://jsfiddle.net/KaHP5/1/

但是，我想提出一个替代方案：general sibling selector。它是 CSS3，所以 IE 支持是一个问题（主要是 IE 7 和 8 有问题 - 但它们确实可以工作......Reference）

这是一个小提琴：http://jsfiddle.net/KaHP5/

你的 CSS 可能是什么样子：

/* hover nested element */
#parent:hover ~ div #child {
    background-color: yellow;
}

最棒的是#konnichiwa 和#konnichiwab 的父级（或祖父级）不需要是具有通用兄弟选择器的直接兄弟（因为它们需要与adjacent sibling selector 相同）。

【讨论】：