＃thing1：悬停＃thing2 {}不工作？

我需要一些CSS的帮助，我试图让它如此，当鼠标悬停在#konnichiwa上时，它显示#konnichiwab。当使用#konnichiwa：hover和#konnichiwab：悬停进行更改时，它会起作用，这只是选择其他有问题的ID。 编辑：对不起，我忘了提及，我也尝试了“+”选择器。仍然没有运气。＃thing1：悬停＃thing2 {}不工作？

第二编辑：据我所知，兄弟选择器是选择旁边的代码选定的元素？我在这个问题上编了几行，我很抱歉。 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; 
}

来源

2014-04-16 andryuu87

对于该选择器按预期工作'＃konnichiwab'应该*在*'＃konnichiwa'里面。目前他们是兄弟姐妹。 – techfoobar

空间是一个后代组合器，也许你想使用相邻的兄弟组合器：'+'而不是空格。 http://reference.sitepoint.com/css/combinators –

关于你的第二次编辑，不，你绝对没有办法让悬停事件从元素父级中冒出并影响页面上的其他一些随机元素单独使用CSS。你能做的最接近的是兄弟姐妹。 –

对于选择按预期#konnichiwab应该内#konnichiwa工作。目前他们是兄弟姐妹。

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

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

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

来源

2014-04-16 06:46:14 techfoobar

使用可以使用相邻的兄弟组合子（+）。因此，无论何时将鼠标悬停在第一个选择器上，属性都将应用于第二个选择器，即与其相邻。

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

请仔细阅读本adjacent sibling combinator

来源

2014-04-16 06:49:18

其他人则暗示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）。

来源

2014-04-16 07:41:50 Jack

＃thing1：悬停＃thing2 {}不工作？

回答

相关问题