CSS div display not working

我希望div #aboutBlurb出現在#aboutLink:hover上。如果這是相關的，我正在使用Foundation 5.2的網格系統。這裏是我的代碼：CSS div display not working

<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; 
}

我已經使用~和>選擇以及不選擇也試過。

來源

2015-05-27 Tom

'+'和'〜'別t在父元素方向工作。你必須在這裏使用JavaScript。 – Xufox

有什麼方法可以重新排列我的代碼，所以我可以使用'〜'或'+'？我寧願使用JavaScript作爲最後的手段。 – Tom

我看不到任何可能...... CSS-wise這兩個元素相距太遠。 – Xufox

我知道你問過一個CSS答案，但用JavaScript做這件事很簡單。如果您擁有jQuery的剛裝中加入這一行：

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

來源

2015-05-27 21:32:57

要解決這個問題需要改變你的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>

來源

2015-05-28 10:21:01

CSS div display not working

回答

相關問題