Result
jQuery
$(document).ready(function() {
$(".nav li").hover(function() {
$(this).find("div").stop()
.animate({left: "210", opacity: 1}, "fast").css("display", "block")
}, function() {
$(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
Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
