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