Result
http://jsfiddle.net/kachibito/NEHZU/97/embedded/result,js,css,html
jQuery
//ホバーイベント $(".more").hover(function() { $(this).stop().animate({ //アニメーションエフェクト width: '225px' }, 200).css({ 'z-index': '10' }); }, function() { //非ホバー時の処理 $(this).stop().animate({ width: '25px', height: '25px' }, 200).css({ 'z-index': '1' }); });
css
.more{ position:relative; width:25px; height:25px; padding:2px; text-align:left; overflow:hidden; } .more span{ position:absolute; left:32px; width:160px; padding:0px 0 0 0px; color:#000; font-weight:bold ; } #test{ position:relative; top:50px; left:213px;}
html
<p class="more"> <a href="javascript:void(0);"> <img src="foo.png"/></a> <span>bar!</span> </p>