当我在div中添加额外的超链接时，下面的html和css悬停代码为什么不能工作？

Question

下面的代码工作正常(比如案例1)

<div>
        <a href="#" id="TAMIL">TAMIL</a>

        <span id="subheader1">
           <a href="#" >NEWS</a>
           <a href="#" >AUDIO</a>
        </span>
     </div>   


<style="text/css>"
#subheader1{    
    display: none;
}
#TAMIL{
    display: block;    
}
#TAMIL:hover + #subheader1{
    display:block;
}
</style>

但不是这个(比如说案例2)

<div>
        <a href="#" id="TAMIL">TAMIL</a>
        <a href="#" id="TELUGU">TELUGU</a>
        <span id="subheader1">
           <a href="#" >NEWS</a>
           <a href="#" >AUDIO</a>
        </span>
     </div>   

     <style="text/css>"
#subheader1{    
    display: none;
}
#TAMIL{
    display: block;    
}
#TAMIL:hover + #subheader1{
    display:block;
}
</style>

为什么？请帮帮我。当我添加另一个超链接时，为什么它不起作用？这是http://jsfiddle.net/cor6bay6/1/

Answer 1

+相邻的兄弟姐妹选择器要求相邻的兄弟姐妹是下面的下一项。

在您的情况下，您需要一般的兄弟姐妹选择器。

#TAMIL:hover ~ #subheader1{
    display:block;
}

The 30 CSS Selectors you Must Memorize

Answer 2

这个+选择相邻的一个。你在找一般的兄弟姐妹选择器。如果使用以下方法，它就能工作：

#TAMIL:hover ~ #subheader1

所以最后你需要给：

#TAMIL:hover ~ #subheader1 {
    display:block;
}