Question

我希望div #aboutBlurb出现在#aboutLink:hover上。如果有任何相关性，我正在使用Foundation 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，只需添加以下行：

<Image BindingContext="{DynamicResource Foo}" Source="{Binding bar}" />

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>

CSS div显示不起作用

2 个答案: