CSS div显示不工作

Question

我想让div #aboutBlurb出现在#aboutLink:hover上。我正在使用基础5.2的网格系统，如果这是任何相关的。下面是我的代码:

  <div id="navBar">
   <div class="row">
    <div class="large-3 medium-3 small-3 columns">
     <a href="#about" class="circleLink" id="aboutLink"><span>About</span></a>
    </div>
   </div>
   <div id="aboutBlurb"><h3>blah</h3></div>   
  </div>

#navBar a.circleLink:hover
{
    background-color: #bc2029;
    color:white;
}
#aboutBlurb
{
    text-align: center;
    position: absolute;
    width:100%;
    font-size: 2em;
    display:none;
}
#navBar #aboutLink:hover + #aboutBlurb
{
    display:block;
}

我试过使用~和>选择器以及没有选择器。

Answer 1

我知道你想要一个CSS的答案，但是用JavaScript做这个是相当容易的。如果你安装了jQuery，只需添加这一行:

$( "#aboutLink" ).hover(function() {
  $( '#aboutBlurb' ).show();
});

Answer 2

要解决这个问题需要改变你的DOM顺序，请检查这个

#navBar a.circleLink:hover
{
    background-color: #bc2029;
    color:white;
}
#aboutBlurb
{
    text-align: center;
    position: absolute;
    width:80%;
    font-size: 2em;
    color: red;
    display: none;
}
#aboutLink:hover + #aboutBlurb
{
    display:block;
}

 <div id="navBar">
   <div class="row">
    <div class="large-3 medium-3 small-3 columns">
     <a href="#about" class="circleLink" id="aboutLink"><span>About</span></a>
     <div id="aboutBlurb"><h3>blah</h3></div>  
    </div>
   </div>   
  </div>