html css切換顯示/隱藏一個div框當點擊像Facebook導航？

你好，我想做一個類似的下拉div就像在facebook上這裏問題是div不停留，當你懸停out.how我可以切換它。就像它只會在你點擊div之外時消失？像Facebook導航欄？ html css切換顯示/隱藏一個div框當點擊像Facebook導航？

CSS

.divs { 
     display: none; 
    } 

    a:hover + .divs { 
     display: block; 
     background-color:white; 
    }

HTML

<a><img src="someIconsButtons.png"></a> 
    <div class="divs"> 
    Stuff here... 
    </div>

我怎麼能達到呢？謝謝請溫柔的傢伙還挺即時新手:)）

來源

2014-02-11 wemdy

我檢查了它的小提琴它的工作：演示： - http://jsfiddle.net/XegE3/4/ –

這應該工作。澄清你的問題。 –

謝謝，但問題是當你徘徊出div不停留。如何切換它。就像它只會在你點擊div之外時消失？像Facebook導航欄？ – wemdy

Fiddle Demo

使用CSS

.divs 
{ 
    display: none; 
} 
a:hover + .divs 
{ 
    display: block; 
    position: absolute; 
    background-color: purple; 
    color: #FFFFFF; 
    width: 200px; 
    height: 200px; 
} 
.divs:after 
{ 
    content:""; 
    position: absolute; 
    display: block; 
    width: 0; 
    height: 0; 
    border-bottom: 20px solid purple; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    margin: -40px 50px 10px 10px; 
}

要了解更多關於CSS的形狀，通過這個下面的鏈接http://www.css3shapes.com/

來源

2014-02-11 05:02:01 Karuppiah

謝謝，但問題是當你盤旋出來的div不停留。如何切換它。就像它只會在你點擊div之外時消失？像Facebook導航欄？ – wemdy

@wemdy：像這樣http://jsfiddle.net/nvBYL/5/？用這段代碼添加一些jquery效果。通過以下鏈接瞭解jQuery效果http://api.jquery.com/category/effects/＆http://jqueryui.com/effect/ – Karuppiah

這裏是我的jQuery的解決方案，

我讓你的東西顯示在懸停上，然後如果點擊了它的身體它是隱藏的。

$('img').hover(function(){ 
    $('div#box').show(); 
}); 
$('body').click(function(){ 
    $('div#box').hide(); 
});

這是一個演示的小提琴。 http://jsfiddle.net/joey6978/zLXK8/

來源

2014-02-11 05:38:17

您可以使用jQuery來實現此目的。試試這個：

HTML：

<a id="showdivblock">Show Div Block</a> 
<div id="divblock"> 
here you go.. 
</div>

CSS

#divblock 
{ 
    position: absolute; 
    background-color: blue; 
    color: #FFFFFF; 
    width: 300px; 
    height: 100px; 
    margin-top: 10px; 
} 
#divblock:after 
{ 
    content:""; 
    position: absolute; 
    display: block; 
    width: 0; 
    height: 0; 
    border-bottom: 20px dashed blue; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    margin: -40px 50px 10px 10px; 
}

，這裏是一個關鍵，你想要什麼，

的jQuery：

$('#divblock').hide(); 
$('#showdivblock').click(function(e){ 
    e.stopPropagation(); 
    $('#divblock').slideToggle(); 
}); 
$('#divblock').click(function(e){ 
    e.stopPropagation(); 
}); 
$(document).click(function(){ 
    $('#divblock').slideUp(); 
});

這是一個工作DEMO。

希望它可以幫助你！

來源

2014-02-11 05:38:57

html css切換顯示/隱藏一個div框當點擊像Facebook導航？

回答

相關問題