My issue involves red and black divs; when I hover over the parent element, the red div should appear by expanding to its full width. However, a problem arises when the width is set to 0px as the content still shows. Can someone provide assistance on how to fix this?
$('#container').mouseover(function(){
$('#red').stop(true,true).animate({ width: '110px'}, 100);
})
$('#container').mouseout(function(){
$('#red').stop(true,true).animate({ width: '0px'}, 100);
})
Update:
View Solved Fiddle here However, as the red div expands to its actual width, the text "watch video" now spans two lines. How can I force it to remain on one line?