Result
jQuery
$(document).ready(function() { $(".nav li").hover(function() { $(this).find("div").stop() //liにマウスホバーするとdivを探して210pxアニメーション移動させ、display:block;に変える .animate({left: "210", opacity: 1}, "fast").css("display", "block") }, function() { //div要素を戻す $(this).find("div").stop().animate({left: "0", opacity: 0}, "fast") }); });
css
.nav {/*リスト全体*/ float: left; margin: 130px 0 0; padding: 0; width: 200px; list-style: none; border-bottom: 1px solid #3373a9; border-top: 1px solid #003867; } .nav li { position: relative; float: left; margin: 0; padding: 0; } .nav li a{ border-top: 1px solid #3373a9; border-bottom: 1px solid #003867; padding: 10px 10px 10px 25px; display: block; color: #fff; text-decoration: none; width: 165px; background: #005094; position: relative; z-index: 2; } .nav li a:hover { background-color: #004c8d; border-top: 1px solid #1a4c76; } .nav li div {/*ツールチップ*/ display: none; position: absolute; top: 2px; left: 0; width: 225px; font-size: 11px; } .nav li div p {/*ツールチップ内のテキスト*/ margin: 7px 0; line-height: 1.6em; padding: 2px 5px 2px 30px; background: #fff; }
html
<ul class="nav"> <li> <a href="#">List 01</a> <div><p>List 01 tooltip</p></div> </li> <li> <a href="#">List 02</a> <div><p>List 02 tooltip</p></div> </li> <li> <a href="#">List 03</a> <div><p>List 03 tooltip</p></div> </li> </ul>
via
www.sohtanaka.com