【参照】Link Underlines Grow to Backgrounds on Hover
リンクのマウスオーバー・マウスアウト時に、リンクの背景をスライドアップ・ダウンします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>イベント操作:相互作用:hoverの使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var $el = $(), linkHeight = parseInt($("p").css("line-height")), speed = 175; // 1000 = 1 second $("#demo a").each(function() { $el = $(this); // If the link spans two lines, put a line break before it. if ($el.height() > linkHeight) { $el.before("<br>"); } $el.prepend("<span></span>"); }).hover(function() { $el = $(this); $el.find("span").stop().animate({ height: linkHeight, opacity: 0.3 }, speed); }, function() { $el = $(this); $el.find("span").stop().animate({ height: "1px", opacity: 1 }, speed); }); }); </script> <!-- CSS --> <style type="text/css"> #demo a { text-decoration: none; color: #900; position: relative; } #demo a span { position: absolute; bottom: -1px; width: 100%; height: 1px; left: 0; background: #900; z-index: 100; } </style> <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head> <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1> <h3 class='h'>実行結果</h3> <div id="wrap"> <h1>イベント操作:相互作用:hoverの使用例 | jQuery</h1> <p>【参照】<a href='http://css-tricks.com/link-underlines-grow-to-backgrounds-on-hover/'>Link Underlines Grow to Backgrounds on Hover</a></p> <p>リンクのマウスオーバー・マウスアウト時に、リンクの背景をスライドアップ・ダウンします。</p> <!-- CODE --> <ul id="demo"> <li><a href="http://www.flickr.com/photos/22559849@N06/3274514408/">アボカド シーザーサラダ</a></li> <li><a href="http://www.flickr.com/photos/22559849@N06/3273696469/">ベーコンとアボカドのピザ(トマトソース)</a></li> </ul> <!-- / CODE --> </div> </body> </html>