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