Question

我想在我的标签中添加一个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>

Answer 1

赞THIS？

HTML

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

CSS

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

Answer 2

首先，你可以在里面添加<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/

Answer 3

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

如果你原来的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 id="childdiv" style="display:none">This is the div to show</div>
</div>

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

Answer 4

我只是想补充一点，你可以使用css通过将不透明度设置为0然后在使用-webkit-transition时将其设置为100来对元素进行淡入淡出转换。

注意：仅在使用webkit的现代浏览器中支持

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

http://jsfiddle.net/xV62K/

在div标签中添加div以在悬停时显示

4 个答案: