在div標籤內添加一個div來顯示在懸停上

我想在我的標籤中添加一個div，當我將鼠標懸停在標籤上時，我想顯示div。我現在有什麼可以做什麼？在div標籤內添加一個div來顯示在懸停上

<div class="accordion-heading"> 
    <a class="ui_title accordion-toggle text_x-large unit_accordion_toggle" data-toggle="collapse"></a> 
    <i class="icon icon_grey icon_user float_right" style="margin-top:-30px; margin-right:16px"></i> 
</div>

來源

2013-12-17 Masriyah

你問如何添加一個div標籤（手動），然後顯示/隱藏懸停（jQuery的）現代瀏覽器的支持，或你問如何添加一個div標籤，並顯示/隱藏它所有在jQuery中？ – Floris

和THIS一樣？

HTML

<a href='#'> 
    Show Content 
    <div>Content</div> 
</a>

CSS

a div{ 
    display:none; 
} 
a:hover div{ 
    display:inline-block; 
}

來源

2013-12-17 15:14:06 SW4

$("#accordion-heading").hover(function(){ 
    $(this).append("<div id='some_div'>Text goes here</div>") 
},function(){ 
    $("#some_div").remove(); 
});

如果你已經在你原來的DIV隱藏的股利，它會更容易，只是顯示和隱藏它。

<div class="accordion-heading"> 
    <a class="ui_title accordion-toggle text_x-large unit_accordion_toggle" data-toggle="collapse"> 
    </a> 
    <i class="icon icon_grey icon_user float_right" style="margin-top:-30px; margin-right:16px"> </i> 
    <div id="childdiv" style="display:none">This is the div to show</div> 
</div> 

$("#accordion-heading").hover(function(){ 
     $("#childdiv").show(); 
},function(){ 
     $("#childdiv").hide(); 
});

來源

2013-12-17 15:14:39 scrblnrd3

@ zgr024我想我更新了他想要的東西 – scrblnrd3

好的。使用javascript的回答是可以接受的並且是一個很好的參考 – zgr024

他的確標記了Javascript和jQuery，我們都知道[你永遠不會有足夠的jQuery]（http://www.doxdesk.com/img/updates/20091116-so- large.gif） – scrblnrd3

首先，你可以添加<div>內：

<div class="accordion-heading"> 
    <a class="ui_title accordion-toggle text_x-large unit_accordion_toggle" data-toggle="collapse"> 
    </a> 
    <i class="icon icon_grey icon_user float_right" style="margin-top:-30px; margin-right:16px"> </i> 
    <div class="hidden">This is the div to show</div> 
</div>

二隱藏的div：

.hidden { 
    display:none; 
}

最後設置的CSS選擇器:hover以顯示內部的div：

.accordion-heading:hover .hidden{ 
    display:block; 
}

演示http://jsfiddle.net/gEWve/3/

來源

2013-12-17 15:16:04 DaniP

在JavaScript上使用CSS是要走的路 – zgr024

我只是想補充一點，你可以在使用-webkit轉換時將不透明度設置爲0，然後設置爲100，從而在CSS上使用淡入淡出轉換。

注：僅在使用的WebKit

a div{ 
    opacity: 0.0; 
    -webkit-transition: 0.5s; 
} 
a:hover div{ 
    opacity: 1.0; 
    -webkit-transition: 0.5s; 
}

http://jsfiddle.net/xV62K/

來源

2013-12-19 20:24:01 zgr024

在div標籤內添加一個div來顯示在懸停上

回答

相關問題