当我在 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

所以最后你需要给：

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

Answer 2

+ 相邻兄弟选择器要求相邻兄弟是下一个 项。

在您的情况下，您需要通用同级选择器。

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

The 30 CSS Selectors you Must Memorize

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

Why doesn't the following html and css hover code work when I add additional hyperlink within a div?

html

css

frontend