CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Masriyah
Masriyah

Reputation: 2505

adding a div within a div tag to display on hover

I want to add a div in my tag and when i hover over the tag i would like to display the div. How can i do with what i currently have?

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

Upvotes: 0

Views: 142

Answers (4)

zgr024
zgr024

Reputation: 1173

I just wanted to add that you could use a fade transition on the element with css by setting the opacity to 0 and then to 100 while using -webkit-transition.

Note: only supported in modern browsers that use webkit

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

http://jsfiddle.net/xV62K/

Upvotes: 1

DaniP
DaniP

Reputation: 38252

First you can add the <div> inside:

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

Second hide the div:

.hidden {
   display:none;
}

Finally set the CSS selector :hover to show the inside div:

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

The demo http://jsfiddle.net/gEWve/3/

Upvotes: 2

scrblnrd3
scrblnrd3

Reputation: 7416

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

If you already have a hidden div in your original div, it would be easier to just show and hide it.

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

Upvotes: 1

SW4
SW4

Reputation: 71150

Like THIS?

HTML

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

CSS

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

Upvotes: 2

Related Questions