CODEWITHSUNDEEP
jquerycss
chillers
chillers

Reputation: 1457

jQuery hover animation will not hide text

I'm using jQuery for hover over effects. I plan on expanding it from what it is now but I'm having a issue. The issue is I want to hide some text until you hover over that div and then it will show it. Then once you move to a different div it will hide it again?

This is what I have so far. http://jsfiddle.net/UDFw7/

CSS

.divname {
height: 20px;
width: 300px;
border: 1px solid black;
}

javascript

$('.divname').hover(function() {
$(this).animate({
    height: '40px'
}, 300);
},function() {
$(this).animate({
    height: '20px'
}, 300);
});

HTML

<div class='divname'>Text Here</div>
<div class='divname'>Text Here <br /> Hidden text until hover over</div>
<div class='divname'>Text Here</div>

Upvotes: 3

Views: 325

Answers (4)

Ronnie
Ronnie

Reputation: 542

Change the CSS like below

.divname {
height: 20px;
width: 300px;
border: 1px solid black;
overflow-y: hidden;

}

Upvotes: 0

S.Visser
S.Visser

Reputation: 4725

CSS

.divname {
height: 20px;
width: 300px;
border: 1px solid black;
}

.divname span {
    display: hidden;
 }

javascript

$('.divname').hover(function() {
    $(this).animate({
        height: '40px'
    }, 300);
    $('span', this).css("display", "block");
},function() {
    $(this).animate({
        height: '20px'
    }, 300);
    $('span', this).css("display", "none");
});

HTML

<div class='divname'>Text Here</div>
<div class='divname'>Text Here <br /> <span> Hidden text until hover over<spa></div>
<div class='divname'>Text Here</div>

Demo: http://jsfiddle.net/UDFw7/14/

Upvotes: 0

DuncanLewis
DuncanLewis

Reputation: 50

What you need is a new CSS class for the hidden text, for example:

.divname p.hidden {
    display:none;
}

Then when you hover over that class you want to display that text, so you need this in your javascript:

 $(this).children().show();

This will change the display property in order to show the hidden text.

I have made a quick fiddle, its not perfect but its a start: http://jsfiddle.net/UDFw7/3/

You will need to add some to it in order to 'rehide' the element when you hover off.

Upvotes: 0

DAC84
DAC84

Reputation: 1274

Add overflow: hidden; to .divname

Upvotes: 6

Related Questions